CSS Pseudo-classes with example

A CSS pseudo-class is a keyword, when added to a selector, defines a special state of the element. Here in this post I have shared 10 useful CSS pseudo classes with examples.

1) :active

The pseudo class :active styles an element when it becomes active. For example, when a button is clicked, it becomes active.

Note: you can also use ::active.

<style>
    /* clicking the button will set it active. */
    #bt:active {
      color: red;
    }
</style>

<body>
  <div>
    <button id='bt'> Click </button>
  </div>
</body>

Try it

Clicking the button (in the above example), sets the button in active mode and will colour the borders red.

2) :before

You can use the :before class to some content (like a text etc.) before an existing content.

For example, the button (below example) has the text "Click it" and using :before I’ll add another text before "Click it".

<style>
    #bt {
        cursor: pointer;
    }
    #bt:before {
        content: '🚀 ';
    }
</style>

<body>
  <div>
    <button id='bt'> Click it </button>
  </div>
</body>

Try it

👉 Remember: The pseudo :before adds a text before the original text. However, it does not change the original text. You can test it.

#bt:before {
  content: 'Just ';
}
<button id='bt' onclick='alert(this.innerHTML)'> Click it </button>

3) :after

You can use the :after pseudo class to add some content after an existing content.

<style>
  #greet:after {
    content: ' I am Arun Banik :-)';
    border-bottom: solid 1px #999;
  }
</style>

<body>
  <div>
    <label id='greet'>Hello</label>
  </div>
</body>

Try it

4) :first-child

The :first-child represents the first element among a group of elements. For example, I have a <div> element, which has two label elements.

Using the :first-child class, I can style the first element only (if that is what I want).

<style>
  label {
    display: flex;
  }
  label:first-child {
    color: green;
  }
</style>

<body>
  <div>
    <!--will change the colour of the first label-->
    <label>Arun</label>
    <label>Shouvik</label>
  </div>
</body>

Try it

Using :first-child and :after selectors together

Note: You can use one or move pseudo class. This example uses :first-child and :after.

<style>
  label {
    display: flex;
  }
  label:first-child:after {
    content: 'Banik';
    position: relative;
    left: 2px; 
    font-weight: bold;
  }
</style>

<body>
  <div>
    <label>Arun</label>
    <label>Shouvik Banik</label>
  </div>
</body>

Try it

5) :nth-child()

The :nth-child() pseudo-class selector is used to match elements based on their position in a group of child elements. Remember, there should be a parent child relationship among elements to work with this selector.

👉 Here’s another example using :nth-child()

<style>
  p {
    font-size: 18px; 
  }

  /*  enter value like 1, 2, 3 etc. depending upon the number of elements */
  div>:nth-child(1) {
    text-align: center;
    border: solid 1px green;
  }
</style>
<body>
  <h2>Targeting the 1st element inside the DIV element using :nth-child() selector</h2>

  <div>
    <p> Arun </p>
    <p> Monika </p>
    <p> Shouvik </p>
  </div>
</body>

Try it

6) :first-of-type

The :first-of-type selector targets the first occurrence of its type inside a container or a group of elements.

<style>
  p:first-of-type {
    color: red;
    font-style: italic;
  }
</style>
<body>
  <div>
    <p> Arun </p>
    <p> Monika </p>
    <p> Shouvik </p>
  </div>
</body>

Try it

7) :first-letter

The :first-letter applies style to the first letter of a string or a sentence.

Here I have a three <p> elements and I am using the pseudo :first-letter to highlight the first letter of every string.

<style>
  /*  targets the first letter in every <p> element */
  p:first-letter {
    color: green;
    font-size: 20px;
  }
</style>
<body>
  <div>
    <h2>Subjects</h2>
    
    <p>Maths</p>
    <p>Physics</p>
    <p>Chemistry</p>
  </div>
</body>

Try it

👉 Remember, if the first letter has punctuations like double quote, a single quote, a question mark etc., style will be applied to the punctuations also.

8) :first-line

The :first-line applies style to the first line in a block level element.

For example, I am extending the 4th example above. The <div> element, which acts as container, has a <h> element and few <p> elements. Using :first-line class, I can style the <h> element, which is the first line inside the block.

<style>
  /*  targets the first line inside <div> element */
  div:first-line {
    color: brown;
    font-size: 22px;
  }
</style>
<body>
  <div>
    <!-- Will style the first line (sentence), which ever element it is in. -->

    <h2>Subjects</h2>
    
    <p>Maths is tough</p>
    <p>Physics is interesting</p>
    <p>Chemistry is interesting</p>
  </div>
</body>

Try it

9) :focus

The :focus pseudo class is used to style an element when focus is set on it. It is usually applied on an <input> element of type text or button etc.

<style>
  /*  change background colour of the textbox on focus */
  input:focus {
    background-color: #ddd;
  }
</style>
<body>
  <div>
    <label>Enter your name:</label> 
    	<input type='text' id='name' />
  </div>
</body>

Try it

10) :hover

The :hover pseudo-class applies style to an element when a user hovers the mouse over the element.


<style>
  input[type='button']:hover {
    color: crimson;
  }
</style>

<body>
  <div>
    <label>Enter your name</label> <input type='text' id='name'>
    <input type='button' value='Save data'>
  </div>
</body>
</html>

Try it

← PreviousNext →