Direct link to the article A Little Reminder That Pseudo Elements are Children, Kinda.

A Little Reminder That Pseudo Elements are Children, Kinda.

Here’s a container with some child elements:

<div class="container">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

If I do:

.container::before {
  content: "x"
}

I’m essentially doing:

<div class="container">
  [[[ ::before psuedo-element here ]]]
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

Which will behave just like …

Avatar of Chris Coyier
Chris Coyier on
Direct link to the article Solved with CSS! Logical Styling Based on the Number of Given Elements

Solved with CSS! Logical Styling Based on the Number of Given Elements

Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.
Avatar of Una Kravets
Una Kravets on