Using Pseudo-classes

When targeting an element with a selector, pseudo-classes let you apply a style to it not only in relation to the content of the DOM, but also in relation to external factors.

In CSS, a pseudo-class is a keyword added to a selector that specifies a special state of the selected element.

A pseudo-class consists of a colon ( : ) followed by its name:

:pseudo-class

A functional pseudo-class also contains a pair of parentheses ( () ) to define the arguments:

:pseudo-class(argument)

The element that a pseudo-class is attached to is defined as an anchor element. A full CSS rule using a pseudo-class looks like this:

selector:pseudo-class {
    property: value;
}

A selector can contain only pseudo-classes without an anchor element. In this case, the rule will apply to any element that fits the pseudo-classes, as if you used * (select all elements) selector before them.

All pseudo-classes can be divided into several groups based on their function:

• Element display state. These pseudo-classes enable the selection of elements based on their display states.

• Input. These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

• Linguistic. These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.

• Location. These pseudo-classes relate to links, and to targeted elements within the current document.

• Resource state. These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

• Time-dimensional. These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.

• Functional. These pseudo-classes accept a selector list or forgiving selector list as a parameter.

• Tree-structural. These pseudo-classes relate to the location of an element within the document tree.

• User action. These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

All of them have their applications, but most groups are feasible only for specific element types. In this article we will focus on the last two pseudo-class groups, as they are useful in a lot of cases and apply to any HTML element.

The list of currently available CSS pseudo-classes are regulated by W3C CSS Specifications and can be found at various open resources such as W3C Community Wiki.

It is the most usable group of pseudo-classes that allows selecting elements based on their position in the markup. This group includes:

One of the common use cases of using tree-structural pseudo-classes is making interlaced rows in a Data Table.

1. In the UI Builder, add a Data Table component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

3. In the Properties Editor, switch to the Container Properties tab.

4. In the Container Properties tab, add the CSS rules to the Container Style property:

.ant-table-body .ant-table-tbody tr.ant-table-row:nth-child(odd) {
    background-color: aliceblue;
}

.ant-table-body .ant-table-tbody tr.ant-table-row:nth-child(even) {
    background-color: lavenderblush;
}

The property is applied once the field is out of focus.

5. Supposing you’ve prepared some data to show in the Data Table, open the dashboard in a separate Preview Mode tab by clicking the () Run button in the right part of the UI header to test the applied styles.

6. In the opened Preview Mode browser tab, the applied styles are visible if the Data Table has any data in it.

While only the components that have mouse and keyboard interactions as the main part of their design provide dedicated style properties for each interactive state, you are able to manage such states for any UI component or even just its individual element. All it takes is to use special CSS pseudo-classes as the base for sticking the states to a component.

The user-action group of pseudo-classes allows styling any HTML element on an interaction by a user:

Let’s suppose that you want a Label component to change its style when a user hovers a cursor over it.

1. In the UI Builder, add the component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

3. In the Properties Editor, switch to the Element Style tab.

4. In the Element Style tab, let’s first add some CSS styles for the component’s default appearance to the Element CSS Style property:

display: block;
width: fit-content;
margin: auto;
padding: 12px 32px;
color: dimgrey;
font-size: 24px;
font-weight: 500;
border-radius: 64px;
background-color: #EAEAEA;
transition: 0.2s;

5. Next, add the rule for the hover state:

:hover {  
  color: saddlebrown;
  background-color: moccasin;
  box-shadow: 0px 0px 0px 2px moccasin;
}

6. The property is applied once the field is out of focus, and the result can be tested on the dashboard.

Read more about the used transition CSS property in the Animated Style Transitions article.

Was this page helpful?

Tell us more

Send

Thank you!