DEV Community

Asraful Islam
Asraful Islam

Posted on

Some Advanced Topic of CSS- CSS Selectors

There are some advanced topics in CSS. By knowing them we can write our CSS more efficiently. It will directly boost you up with your skills and level. Today we are going to explain about 3 topics.

  • CSS Pseudo-Classes**

  • CSS Pseudo-Elements**

CSS Pseudo-Classes: The pseudo-class selector is used to select the element that is in a specific state. By using this we can change the state by changing the styles.
The most commonly used Pseudo Classes are active, hover, etc.

Syntax:

selector: pseudo-class {
        property: value;
    }
Enter fullscreen mode Exit fullscreen mode

In the Pseudo class, a colon (:) is used after the selector.

Example:
Image description

CSS Pseudo-Element: The pseudo-elements selector has particularly used in styling specific parts of an element. By using this we can change the state of a specific part by changing the styles.
The most commonly used Pseudo Elements are before, after, etc.

Syntax:

selector:: before {
        property: value;
    }

Enter fullscreen mode Exit fullscreen mode

In the Pseudo element, two colons (::) are used after the selector.

Example:

Image description

Top comments (0)