UX Design and Development course

Pseudo-classes selectors, for addressing state or context

Pseudo selectors are extremely powerful selectors for presentation as they are not definitive DOM elements and are well suited semantic solutions for painting state or placement without additional support from JavaScript.

The following is a list of pseudo selectors:

Presentation applied when a DOM element is associated to an anchor tag. ref

a:link { ... }

:visited

Presentation applied as the browser records the URL in history. ref

a:visited { ... }`

:active

Presentation state applied when the element is currently being interacted with. ref

a:active { ... }`

:hover

Presentation state applied when the user 'hovers' over the DOM element. ref

div:hover { ... }`

:focus

Presentation state applied when the DOM element has focus. Typically a form's <input> element. ref

input:focus {
  ...
}

:first-child

Presentation applied to the first DOM element within the specified parent DOM node.

ul.parent
  li hello there
  li why, this is interesting
  li
    | can you
    a(href='/') click this
li:first-child {
  color: orange;
}

:nth-child

Presentation applied to the nth child element within the specified parent DOM node. Common use cases are nth-child(odd), nth-child(even), or nth-child(n2+2) ref.

Will paint the odd li elements:

li:nth-child(2n+1) {
  ...
}

Will paint the even `li` elements:

```css
li:nth-child(2n) {
  ...
}

:nth-last-child

Presentation applied to the last element contained within the specified parent node ref.

p:last-child {
  font-size: 0.75em;
}

:nth-of-type

Presentation added to the nth child of a pre-specified tag contained within the specified parent node. Common example is:

ul.parent
  li these are words
  li that you can see
  li in a list
  li using HTML
  li isn't this freaking cool!
  li
    | then I can even
    a(href="/") embed a link
.parent li:nth-of-type(2n+1) {
  color: orange;
}

:first-of-type

Presentation added to the first child of a pre-specified tag contained within the specified parent node. Common example is:

.parent li:first-of-type {
  color: orange;
}

:last-of-type

Presentation added to the last child of a pre-specified tag contained within the specified parent node. Common example is:

.parent li:last-of-type {
  color: orange;
}

:empty

Presentation applied to an empty DOM element

ul.parent
  li these are words
  li that you can see
  li
  li using HTML
  li isn't this freaking cool!
  li
    | then I can even
    a(href="/") embed a link
.parent li:empty {
  background-color: orange;
}

:target

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. See example project.

<section id="voters">
  Content
</section>
:target {
  background: yellow;
}

:checked

Presentation applied to a form <checkbox> when it is in the checked boolean state.

<input type="checkbox">
<input type="checkbox" checked>
input[type=checkbox] {
  display: block;
  margin-bottom: 20px;
}
input[type=checkbox]:checked:after {
  display: block;
  content: "words";
  margin-left: 20px;
}

:enabled

Presentation applied when a form element is in the enabled state. All form elements are enabled by default.

input:enabled + label{
  color: #333;
  font-style: italic;
}

:disabled

Presentation applied when a form element is in the disabled boolean state.

input:disabled + label{
  color: #fff;
  font-style: bold;
}

:not()

:not matches an element that is not represented by the argument.

.parent li:not(.foo) {
  color: orange;
}

You can even :not() on another pseudo selector

.parent li:not(:empty) {
  color: orange;
}

::first-letter

Selects the first letter of the text in the element.

.parent li:not(.foo)::first-letter {
  color: blue;
  text-transform: uppercase;
  font-size: 1.3em;
}

::first-line

Selects the first line of text in the element. The length of the line is dependent on the width of the parent node.

.parent {
  width: 200px;
  background-color: #ccc;
}
.parent li::first-line {
  color: blue;
  text-transform: uppercase;
  font-size: 1.3em;
}

Using Pseudo Classes for Design

Pseudo classes are not only for placement within the DOM or state reference. Pseudo elements like :before and :after can actually add content and paint visual elements into the view without adding additional DOM nodes.

This becomes extremely powerful when working on a UI that may exceed the limits of the available viewport and not force the browser to activate scroll bars.

A very popular use case for pseudo elements it to add content to the view. See example

<a href="#" rel="docs" data-notification="3">docs</a>
[data-notification]:after {
  display: block;
  text-align: center;
  content: attr(data-notification);
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: #ff6625;
}

Meet the Pseudo Class Selectors

Source

For an in-depth review of these pseudo selectors and how they work, this is a great article by Chris on CSS-Tricks.com

image