w3university
the legend of the web - made easy
Stage

study

translate

apprehend

grasp

experience

Style with CSS Course

w3university Courses - CSS

Pseudo Classes and Elements

Box shadow can create some wonderful visual effects, try using inset with rgba colours.

To allow a child to appear outside its parent container area we can use css positioning

Pseudo Classes and Elements

Up until now, when looking at selector rules, we have targetted elements that exist in the html markup. User defined class and id names have also been used as they simplify selector targetting.

Within the CSS standard, there are pseudo classes and pseudo elements. Using a pseudo type selector allows us to style either an element based on its actual state or position (pseudo class), or set styles on an area of content or an imaginary space (pseudo element). We cannot target elements in this way using simple element selectors or classes.

These are indeed very powerful selectors to have at our disposal. The example below shows the difference between the two pseudo selectors.

Example Ps-A - Pseudo Selector Type

Pseudo Class

A pseudo class selector is used to style an element based on its status or tree position. Two examples of selectors using a pseudo class selector are shown here:

article ul li:nth-child(even) {

article a:hover {

The top selector targets <li> elements based on their markup position (even numbered children)

The lower selector targets <a> elements based on their status

Pseudo Element

A psuedo element selector styles an area around an element or a portion of inline content. Two such examples are shown here:

article ul li:after {

article p:first-line {

The top selector in this example styles a virtual element after a <li> element

The lower selector in this case styles the first line of text of a paragraph element

Using pseudo selectors can not only save some time (in the case of styling particular layers of child objects or first lines of a paragraph) but also give our webpage some form of responsive styling.

Responsive styling are styles that apply to an element based on its state. An example of a state is hover. We will look at states in detail within this topic.

There are quite a few pseudo classes we need to look at, where as there are just four pseudo elements. Pseudo elements offer us slightly more power and we will look at these later on.

We will now look at pseudo classes and example uses for each along with the selector syntax.

Pseudo classes typically offer us a way to style an element based on its position in the tree or its relationship to its parent element. We also have a very broad but extremely useful not pseudo class which we will also cover.

First Of Type Pseudo Class

section p:first-of-type { color: yellow }

First Of Type Class Styler

This is the first of type paragraph of element section

This is the second of type paragraph of element section

Markup Panel

<section>
<h1>First Of Type Class Styler</h1>
<p>This is the first of type paragraph of element section</p>
<p>This is the second f type paragraph of element section</p>
</section>


The pseudo class selector above styles a paragraph based on it being the first of its type to its parent. The <h1> element is the first child of the section but since it does not match the type of element that the class selector is looking for it is not considered for the rule.

Styling in this way avoids us having to add additional markup to give the paragraph a class in order to target it.

As well as the first of type pseudo class we also have at our hands the last-of-type pseudo class. We can guess what it targets from the name, and how we use it is of course the same, except it targets the last element of chosen type.

Last Of Type Pseudo Class

section p:last-of-type {color: yellow}

Last Of Type Class Styler

This is the first of type paragraph of element section

This is the second of type paragraph of element section

This is the last of type paragraph of element section

Markup Panel

<section>
<h1>Last Of Type Class Styler</h1>
<p>This is the first of type paragraph of element section</p>
<p>This is the second of type paragraph of element section</p>
<p>This is the last of type paragraph of element section</p>
</section>

Stage w3university's Arena for CSS learning Your Stage - Your Paintbrush - CSS
Stage in-Course Navigator
>