Pseudo-classes

A pseudo-class defines a special state of an element, allowing us to style it based on user interactions or its position in the document (e.g., :hover, :first-child). Below you can see all link-related pseudo-classes.

<style>
    a{color: black;}
    a:hover{color: red;}
</style>
                                    

We style each of these states as a separate selector. To style form controls, we use pseudoclasses like :checked, :disabled, and :focus. The latter indicates an input text control that the user is using now.

:first-child and :last-child

These two pseudo-classes indicate the first and the last element of a certain group.

<style>
    p:first-child{color: red;}
    p:last-child{color: blue;}
</style>

<div>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>
                                    

:nth-child

This pseudo-class indicates the even and odd elements of a certain group (based on their placement in the group). It can also indicate a specific element.

<style>
    p:nth-child(even){color: red;}
    p:nth-child(odd){color: blue;}
    p:nth-child(3){color: green;}
</style>

<div>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>
                                    

:not

This pseudo-class styles elements that do not have a certain class assigned.

<style>
    p:not(.r){color: green;}
    .r{color: red;}
</style>

<div>
    <p class="r">Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p class="r">Lorem ipsum</p>
</div>
                                    

Pseudo-elements

A pseudo-element creates and styles specific parts of an element's content, such as its first letter, line, or content before and after (e.g., ::before, ::first-letter).

::before

This pseudo-element adds an element before an object. It is useful for adding custom icons to lists.

<style>
    ul{list-style-type: none;}
    li::before {
        content: "♞ ";
        color: red;
    }
</style>

<ul>
    <li>First</li>
    <li>Second</li>
</ul>
                                    

• First
• Second

::after

This pseudo-element adds an element after an object.

<style>
    ul{list-style-type: none;}
    li::after {
        content: " ♞";
        color: red;
    }
</style>

<ul>
    <li>First</li>
    <li>Second</li>
</ul>
                                    

• First
• Second

::first-letter

This pseudo-element styles the first letter of text in a block-level element (e.g., a paragraph).

<style>
    p::first-letter{font-size: 25px;}
</style>

<p>Lorem ipsum...</p>
                                    

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

::first-line

This pseudo-element styles the first line of text in a block-level element (e.g., a paragraph).

<style>
    p::first-line{font-weight: bold;}
</style>

<p>Lorem ipsum...</p>
                                    

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

::selection

This pseudo-element styles the portion of text selected by the user.

<style>
    p::selection{color: red;}
</style>

<p>Try to copy this text.</p>
                                    

Try to copy this text.

Inheritance

In CSS, styles can be inherited from parent elements to their child elements, allowing for consistency across a web page. For example, if a parent <div> has a color style, its child <p> elements will inherit this style unless explicitly overridden. This is part of the cascading nature of CSS, where styles are applied based on specificity and the order in which they appear. If a child element has a style set to initial, like color: initial;, it will reset the property to its default value, which is defined by the browser or the element's default style. On the other hand, using inherit will force the child element to inherit the exact value of the property from its parent, even if that style has been overridden at a more specific level. In the example below, the <p> tag will inherit the blue color from the <div> even if there are other styles defined elsewhere.

<style>
    div{color: blue;}
    p{color: inherit;}
</style>
<div>
    <p>This text will inherit the blue color from its parent.</p>
</div>
                                    

Because CSS follows a cascading structure, we can define styles for specific combinations of elements. For example, writing .class a applies styles to an <a> tag inside an element with the class .class assigned. Similarly, we can use a more complex selector like ol > li > ul, which targets a <ul> list that is a direct child (does not include elements deeper within other elements) of an <li>, which itself is a direct child of an ordered list (<ol>). These kinds of combinators allow us to precisely target elements, giving us flexibility and control over the styling of specific parts of the document.

*A "child" is an object inside a "parent" object.