css - :is()

by prince bazawule

HTML

<header>
	<h1>header ↓</h1>
	<p>Paragraph in header</p>
</header>
<main>
	<h1>main ↓</h1>
	<p>Paragraph in main</p>
</main>
<footer>
	<h1>footer ↓</h1>
	<p>Paragraph in footer</p>
</footer>

SCSS

// variables

// colors
$lightgrey: rgba(238, 241, 243, 1);
$darkgrey: rgba(192, 200, 208, 1);
$blue: rgba(34, 190, 198, 1);
$black: rgba(48, 69, 92, 0.8);
$white: rgba(255, 255, 245, 0.8);

// fonts
$sans: 'Ubuntu', sans-serif;
$heading: 'Source Sans Pro', sans-serif;

// document styles
body {
	position: relative;
	width: 90%;
	height: 100%;
	background: $lightgrey;
	font-family: $sans;
	font-weight: 300;
	color: $black;
	margin: 5% auto;
	
	h1 {
		display: inline-block;
		font-family: $heading;
		color: $black;
		padding: 0.15em;
		border-radius: 4px;
		margin: 0;
		background: $darkgrey;
	}
	
	p {
		margin-bottom: 2em;
	}

	:is(header, footer) :is(h1) { // :is() implementation
		background: $blue;
		color: $white;
	}
}