Structural CSS Selectors

Sat, 05 Jun 2021 00:00:00 +0000

Yeah, you read that right. Let go straight into it!

A Test Case

Can you interprete this CSS selector query?

1
2
3

p.title:first-of-type {
  color: red;
}

Let me think like you would:

Select every P element that has the class name of title and apply the color red to the first of its type.

<body>
  <p>Lorem Ipsum</p>
  <p class="title">Paragraph 2 (shows in red color)</p>
</body>

You think you’re right.