:empty

It matches empty elements. I can match against this to hide error messages, or if someone doesn’t fill out a paragraph for their template

  <p></p>

I can also use :not to ignore images, since they are considered “empty”

  :not(svg, img, picture, input):empty {}

:target

When I click on a link, the element where it goes to #demo is matched by :target I can also specify it as well

  :target h1 {}

Only child / Only of type

The example given is “If a testimonial is shown one way (with text only) versus another (with an image)” only-child means if it’s the only element

  <div>
<p></p>
</div>
  
  div > p:only-child {}
  
  <div>
<p></p>
<img />
</div>
  
  div > p:only-of-type {}

Build perfect boxes: 

  .box { 
	aspect-ratio: 1 / 1; 
	
}

Viewport

Issue with vh is it doesn’t take into account mobile address bar dvh will readjust, dynamically. Makes things scale or not. svh assumes there’s a viewport. So if there isn’t one, it’s not a big deal. Apparently

  • svh
  • dvh
  header {
	height: 50 svh;
}

:is

Original:

  .example-1 h3,
.example-1 h4,
.example-1 a, {}

with :is()

  .example-1 :is(h3,h4,a) {}

:has

:has() selects the parent element

  .example:has(img)

If class example has an image, it now selects .example. So I could do this

  <div class="example">
	<h2>Hi</h2>
	<img />
</div>
  
  .example.has(img) > h2 {
	font-size: 2em;
}

Resources