prof3ssorSt3v3/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS :is :where :has</title>
    <link href="./main.css" rel="stylesheet" />
  </head>
  <body>
    <header class="masthead">
      <h1>H1 :is() :where() :has() Pseudo-Classes</h1>
      <h2>H2 :is() formerly :matches()</h2>
    </header>
    <main>
      <h2>H2 Some Heading</h2>
      <p class="one">
        <span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit.
        Corrupti tempora dolor illo ea doloribus? Officiis laboriosam rerum
        corporis dolore odio, aut assumenda eius officia dolorum eveniet quam
        voluptatum in eum?
      </p>
      <p class="two">
        <span
          ><img src="./javascript.svg" alt="" width="200" />Neque, magni
          mollitia</span
        >
        numquam sapiente ducimus excepturi temporibus. Maiores, odit! Cumque
        atque consequatur minus, nam voluptatibus sit doloribus dolorum? Ipsam
        mollitia possimus temporibus accusantium aliquid iusto alias doloremque
        voluptatibus impedit!
      </p>
      <p class="three">
        Vel illo, repellendus porro sint deleniti earum ipsa, velit rem
        asperiores facilis in corrupti corporis autem alias omnis debitis soluta
        praesentium nihil quaerat, id ab veritatis? Placeat assumenda qui illum.
      </p>
    </main>
    <footer>
      <p>&copy; 2022</p>
    </footer>
  </body>
</html>

## main.css
/*
Specificity
!   id    class   tag
0   0     0       1
*/
* {
  font-family: sans-serif;
}
html {
  font-size: 20px;
}
header {
  color: gold; /* 0.0.0.1 */
}
header:is(.masthead, .blah, .hello) {
  color: fuchsia; /* 0.0.1.1 */
}
header :is(h1, h2) {
  color: orangered; /* 0.0.0.2 */
}
/* header h2,
main h2 {
  color: #bada55;
} */
:is(header, main) h2 {
  /* color: #bada55; 0.0.0.2 */
}
:where(header, main) h2 {
  color: rebeccapurple; /* 0.0.0.1 */
}

p:has(span) {
  /* applies to p */
  font-size: 2rem;
}
p:has(> img) {
  /* not with <p><span><img> */
  border-left: 1rem solid red;
}
p:has(+ p) {
  border-bottom: 2px solid cornflowerblue;
  /* li:has(+li) */
}
p:not(:has(span)) {
  color: cornflowerblue;
  font-size: 1.5rem;
}
form:has(:invalid, :indeterminate, :out-of-range, :placeholder-shown) {
  /* 0,0,1,1 */
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
	<title>CSS :is :where :has</title>
	<link href="./main.css" rel="stylesheet" />
	</head>
	<body>
	<header class="masthead">
	<h1>H1 :is() :where() :has() Pseudo-Classes</h1>
	<h2>H2 :is() formerly :matches()</h2>
	</header>
	<main>
	<h2>H2 Some Heading</h2>
	<p class="one">
	<span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit.
	Corrupti tempora dolor illo ea doloribus? Officiis laboriosam rerum
	corporis dolore odio, aut assumenda eius officia dolorum eveniet quam
	voluptatum in eum?
	</p>
	<p class="two">
	<span
	><img src="./javascript.svg" alt="" width="200" />Neque, magni
	mollitia</span
	>
	numquam sapiente ducimus excepturi temporibus. Maiores, odit! Cumque
	atque consequatur minus, nam voluptatibus sit doloribus dolorum? Ipsam
	mollitia possimus temporibus accusantium aliquid iusto alias doloremque
	voluptatibus impedit!
	</p>
	<p class="three">
	Vel illo, repellendus porro sint deleniti earum ipsa, velit rem
	asperiores facilis in corrupti corporis autem alias omnis debitis soluta
	praesentium nihil quaerat, id ab veritatis? Placeat assumenda qui illum.
	</p>
	</main>
	<footer>
	<p>© 2022</p>
	</footer>
	</body>
	</html>
	/*
	Specificity
	! id class tag
	0 0 0 1
	*/
	* {
	font-family: sans-serif;
	}
	html {
	font-size: 20px;
	}
	header {
	color: gold; /* 0.0.0.1 */
	}
	header:is(.masthead, .blah, .hello) {
	color: fuchsia; /* 0.0.1.1 */
	}
	header :is(h1, h2) {
	color: orangered; /* 0.0.0.2 */
	}
	/* header h2,
	main h2 {
	color: #bada55;
	} */
	:is(header, main) h2 {
	/* color: #bada55; 0.0.0.2 */
	}
	:where(header, main) h2 {
	color: rebeccapurple; /* 0.0.0.1 */
	}

	p:has(span) {
	/* applies to p */
	font-size: 2rem;
	}
	p:has(> img) {
	/* not with <p><span><img> */
	border-left: 1rem solid red;
	}
	p:has(+ p) {
	border-bottom: 2px solid cornflowerblue;
	/* li:has(+li) */
	}
	p:not(:has(span)) {
	color: cornflowerblue;
	font-size: 1.5rem;
	}
	form:has(:invalid, :indeterminate, :out-of-range, :placeholder-shown) {
	/* 0,0,1,1 */
	}