Pseudo Classes & Pseudo Elements

In this article, we will continue CSS selectors learning. We will cover pseudo elements and pseudo classes here.

• Pseudo Classes(:): Pseudo classes add CSS properties to the state of the element. Most widely used is the hover of the link/button.

Syntax

element : state { style property }

We will discuss the most commonly used pseudo-classes.

Let's start by applying hover on a button

HTML

    <h1 title>Hover</h1>
    <button class="btn" >click me</button>

CSS

body{
    background-color: #c2c2c2;
}

h1[title] {
    color:#6A1B4D;
}

.btn {
    color: #FFF;
    padding: 10px 20px;
    background-color: #DB0B5F;
    border: none;
    border-radius: 5px;
}

.btn:hover {
    padding: 20px 30px;
    font-size: 24px;
    cursor: pointer;
}

Output

Now we will look into active, visited, and link pseudo-classes

You need to take care the position of active, link , visited and hover position in css file.

HTML

    <a href="https://akshitagarg275.hashnode.dev/" target="_blank">Blog</a>

    <a href="https://www.youtube.com/channel/UC__NnsTS631TrUx2XAkFFMA">Youtube</a>

CSS

/*unvisited link*/
a:link {
    color: red;
  }

  /* visited link */
  a:visited {
    color: forestgreen;
    text-decoration-color: hotpink;
}

  /* mouse over link */
  a:hover {
    color: hotpink;
  }

  /* selected link */
  a:active {
    color: blue;
  }

Output

Let's discuss some of the pseudo classes used in the forms

HTML

<form action="">

    <label for="name">name: </label>
    <input type="text" name="" id="name">

    <br>

    <label for="select">Yes/No</label>
    <input type="radio" name="select" id="select">
    <input type="radio" name="select" id="select">

    <br>

    <button disabled="disabled">Click</button>
    <button>Submit</button>

CSS

/* focus , when we 
* are about to write in 
* input
*/

input:focus {
  font-size: 20px;
  color: #FFF;
  background-color: #E03B8B;
}

/* changing color 
* of label
*/

label  {
  color: #6A1B4D;
}

/* when we click on 
* radio button
*/

input:checked {
  box-shadow:  0 0 0 2px #6A1B4D;
}


/* css applied 
* if button is disabled
*/

button:disabled {
  padding : 10px 20px;
  color: #c2c2c2;
}

/* css applied 
* if button is enabled
*/

button:enabled {
  color: #FFF;
  background-color: #F7CD2E;
  border:none;
  padding: 15px 20px;
  border-radius: 15px;
}

Now, in this section, we will discuss how to target a specific child of an element.

Selecting first and last child among the siblings.

Syntax

element:first-child {style property}

element:last-child {style property}

HTML

<div>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
          molestias debitis distinctio nulla modi excepturi magni perferendis
          consectetur quidem eos?
        </p>
</div>

 <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
</ul>

<section>
        <p>Test 1</p>
        <p>Test 2</p>
        <p>Test 3</p>
        <p>Test 4</p>
        <p Test 5</p>
</section>

CSS

body{
  background-color: #d1d1d1;
}

/*to refer to the
* first child
*will select all p tags
* that are first in its sibling
*/ 

p:first-child {
  color: #6A1B4D;
  background-color: #fff;
}

li:last-child {
  color: #fff;
  background-color: #5A20CB;
  font-size: 20px;
}

Output

Selecting nth-child and nth-last-child among the siblings.

Syntax

selector :: pseudo-class{style property}

element:nth-child {style property}

element:nth-last-child {style property}

HTML

    <div>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
          molestias debitis distinctio nulla modi excepturi magni perferendis
          consectetur quidem eos?
        </p>
    </div>


    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>

    <div>
        <li>awesome</li>
        <ul>
          <li>highlight me</li>
          <li>highlight me</li>
        </ul>
    </div>

    <section>
        <p>Test 1</p>
        <p>Test 2</p>
        <p>Test 3</p>
        <p>Test 4</p>
        <p lco-code>Test 5</p>
    </section>

   </form>

CSS

body{
  background-color: #d1d1d1;
}

/*selects even
* child
*/ 

li:nth-child(2n) {
  color: #FFF;
  background-color: #6A1B4D;
}

/*selects odd
* child
*/ 

li:nth-child(2n+1) {
  color: #FFF;
  background-color: #ff5202;
}

/*selects odd
* child from last
* using odd keyword
*/ 
p:nth-last-child(odd){
  color: #FFF;
  background-color: #120E43;
}

/*selects even
* child from last
* using odd keyword
*/ 
p:nth-last-child(even){
  color: #FFF;
  background-color: #1C8D73;
}

Output

In this, section, we will know about some pseudo elements that allow to style specific part of the selected element. We use (::) to refer to pseudo elements

Syntax

selector :: pseudo-element {style property}

element :: after
element :: before

HTML

 <div>
        <form action="">
          <label for="name">name</label>
          <input type="text" name="name" />

          <label class="imp-label" for="email">email</label>
          <input type="text" name="email" />

          <button data-tooltip="Tooltip" type="submit">Submit</button>
        </form>
      </div>

      <p>Please take note!</p>

CSS

body{
  background-color: #d1d1d1;
}

p:hover::after{
  content: "IMP";
  background-color: #6A1B4D;
  color: #FFF;
}

.imp-label::before {
  content: "*";
  color: #B4161B;
}

Output

Here, we are at the end.

I hope you guys got a good learning experience. Try the examples and let me know if they helped you.

Linkedin