Intermediate CSS Selectors

Thanks for the evolve of CSS we can use more advanced and sophisticated selectors in our daily work.

 

We are far from the day when we had to use id and class selectors. Nowadays we use confidently the ::before and ::after pseudo item to make a great feature or to create a clearfix. Currently, we don’t have to use jQuery to solve a complicated selector like the negation selector.

The core of the CSS selectors and architecture always be the class (and id, but in nowadays that is such a bad practice). The selectors in this article do not offer anything mindblowing; instead, they improve and complete our current toolset.

Keep in mind that some of them are more useful than the others. I try to give you a valid example (where it is possible) how you can use them in a real project.

:not()

The :not() is a simple negation selector. You select a bunch of items and remove the ones you don’t need.

It can be handy when you build a horizontal navigation, and you use padding / margo / separator combo in your design like the following:

See the Pen :not() Use Case by Adam Laki (@adamlaki) on CodePen.

With the use of :not() you don’t have to reset/overwrite the last item instead you can tell the following: style all the elements except the last one.

:required, :valid, :invalid

You can use these three pseudo class at form input validation. The use case is plain simple:

  • with the :required you can select the input items which are required,
  • with the :valid you can select the input items which passed through the pattern where the input is required,
  • with the :invalid you can select the input items which not gone through the pattern where the input is required.
See the Pen :required, :valid, :invalid by Adam Laki (@adamlaki) on CodePen.

As you see usually, you use these three together!

:target()

With the help of :target(), you can select any item with a specific ID which is provided by an anchor tag.

With the use of this method, you can dynamically connect two object (an anchor and a container) and catch the last one state.
The standard use case could be a modal window, like the following:

See the Pen Pure CSS modal with :target by Adam Laki (@adamlaki) on CodePen.

Partial selectors

You can use the partial selectors with the help of the attribute syntax where you use the square brackets to select an attribute or an attribute with a particular value like this:

div[class="menu"] { ... }

The attribute syntax is helpful by own, but with the help of the partial types, we can broad its capabilities.

Ending selector ($=)

Target the ending of an attribute value:

div[id$="_panel"] { ... }

Starting selector (^=)

Target the starting of an attribute value:

div[class^="panel_"] { ... }

Contain selector (*=)

Check if the attribute value contains the given value:

div[class*="panel"] { ... }

::first-letter, ::first-line

The initial mostly used in print media, but in these days you can use it in your CSS with the help of ::first-letter.

With the help of :first-line, you can select a text block first line.

See the Pen ::first-letter, :first-line Demo by Adam Laki (@adamlaki) on CodePen.

With the help of the previously mentioned two, you can give more style for your typography. We can say that this is a less used CSS feature.

:empty

Using the :empty pseudo-class (as you guessed) you can check if an item doesn’t have any descendant.

For example: if a button doesn’t have text value and you want to hide it you don’t need JS to do so, just simply give the :empty state a display: none; value like the following:

See the Pen :empty Demo by Adam Laki (@adamlaki) on CodePen.

:lang

With the use of :lang you can select HTML item which specified in a different language with the help of the lang attribute (or some meta tag or headers) like in the following example:

See the Pen :lang() Demo by Adam Laki (@adamlaki) on CodePen.

:checked

The :checked pseudo-class is useful when you work with radio, checkbox or option element and you like to apply some custom styling to them.

See the Pen Pure CSS Checkbox and Radio by Adam Laki (@adamlaki) on CodePen.

Related links

Special thanks for the following recource(s): Designed by Newelement / Freepik