10 more CSS ninja tips and tricks

Welcome to another article about 10 more CSS tips that you were probably waiting for. Let’s begin, shall we?

1. Accessing the previous element(s) – Spotlight navigation effect

Before it was only possible to access the next element but now you can also select the previous element with the help of the parent selector(:has). This line of code does the trick: li:has(+ li:hover) a.

This means that a li element that is followed by another li element that is hovered should have it’s a child element with a certain style. Here is the code for this effect:

ul {
  display: flex;
  list-style: none;
  gap: 0 15px;
}
a {
  color: #967E76;
  text-decoration: none;
}

ul:hover a {
  color: #ddd;
}
li:has(+ li:hover) a, 
li:hover + li a {
  color: #999
}
li:hover a {
  color: #000;
}

Accessing all previous elements

ul {
  display: flex;
  list-style: none;
}
a {
  color: #967E76;
  text-decoration: none;
  padding: 0 15px;
  position: relative;
}

li a {
  display: block;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
  transition: border-color 0.6s
}
li:has(~ li:hover) a,
li:hover a {
  border-bottom-color: #41b3a3
}

2. Get first-of-className, second-of-className and last-of-className

We have first-of-type, last-of-type and so on but these can not help us in selecting the first encounter of a classname in a list of elements but we can do it with a trick.

Selecting the first .box in a list of elements: .box:not(.box ~ .box)

So we selected every .box but excluded those that come after another .box element.

Selecting the second .box in a list of elements: .box~ .box:not(.box~ .box~ .box)

We selected the second a .box that comes after a .box but excluded those .box elements that come after a .box that comes after a .box.

Selecting the last .box in a list of elements: .box:not(:has(~ .box))

3. Selecting elements with nth-child

a) Select first 5 elements

li:nth-child(-n+5) { background: #c38d9e }

b) Select elements starting from the 5th

li:nth-child(n + 5) { background: #c38d9e }

c) Select elements between 3rd and 8th

li:nth-child(n+3):nth-child(-n+8) { background: #c38d9e }

4. Selecting an element with n children

a) Selecting a list with 1 child only

ul:has(:only-child) {
  color: red
}

b) Selecting a list with 3 children

ul:has(:nth-last-child(3):first-child) {
  color: red
}

c) Selecting a list with 5 or more elements

ul:has(li:nth-child(n + 5)) {
  color: red
}

5. Selecting the neighbouring child elements

<div class="boxes">
  <div class="box">
    Animals <input type="radio" class="animalsRadio" name="options" />
    Insects <input type="radio" class="insectsRadio" name="options" />
  </div>
  <div class="box">
    <h2>List of animals and insects</h2>
    <ul>
      <li class="animal">Dog</li> 
      <li class="insect">Ant</li>  
      <li class="animal">Horse</li>
      <li class="animal">Cow</li>
      <li class="insect">Fly</li>
    </ul>
  </div>  
</div>  

.boxes:has(.animalsRadio:checked) .animal  {
  color: red
} 
.boxes:has(.insectsRadio:checked) .insect  {
  color: red
} 

6. Accessing the direct parent and ancestor parent with a certain class

With jQuery we were doint ghis:

this.parent() or this.parents(.box)

The this was the hovered element for example.

With CSS we do this instead:

ul:has(> .test) {
  border: 1px solid red
}

So the element .test has a direct parent(ul) that we selected.

.box:has(.test:hover) {
  border:1px solid red
}

When we hover the .text element we want to select it’s ancestor(parents in jQuery) that have the classname .box.

7. Select every even child element skipping the hidden elements(skipping = selecting the one after it)

li.hidden{
  display: none;
}

li:nth-child(even),
li:hidden:nth-child(even) + li {
  color: red
}

8. Filtering parents and child elements

:is(section, header, footer, main) :is(h1, h2, h3, h4, h5, h6) {
   font-size: 16px;
}

This will result in the following:

section h1, section h2, section h3, section h4, section h5, section h6, header h1, header h2, header h3, header h4, header h5, header h6, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, main h1, main h2, main h3, main h4, main h5, main h6 {
  font-size: 16px
}

The :is() makes your code so much better and more elegant.

9. Difference between :not(:has(p)) and :has(:not(p))

The difference is quite significant:

The :not(:has(p)) selects elements that don’t have a p tag inside.

The :has(:not(p)) is more like selecting every child, but excluding the p. So if you don’t wan’t to enumerate all elements and exclude the p, you can just write this selector and it will be like saying :has(*:not(p)); – has all / any elements but the p tag.

10. Selecting elements that have n siblings after it, before it

p:has(+ * + * + *)

This means the p tag will be selected if it has 3 more siblings after it.

* + * + * + p

This selects the p tag if it has 3 elements before it.

Thank you for your attention, these were the 10 CSS tips and tricks for today. Please comment if you have any questions. Also don’t forget to subscribe for more and of course rate this article.

0