23 CSS Selectors – PSEUDO Selectors

Last updated on October 31st, 2020 at 07:50 am.

23 CSS Selectors – PSEUDO Selectors

In the last post you learned how to use Attribute Selectors in CSS .  In this post you will learn how to use Pseudo-class and Pseudo-elements selectors.

These selectors will select an element when they are in a certain location or when they are in a certain state. For example,  when an <a> tag is hovered ( :hover ) , or the first <li>  ( :first-child ) , or to specify styles that apply before an element ( ::before )  or after an element ( ::after ) .  Let’s take an example of the <a> tag and <li> tag , sample CSS code for pseudo items  is as below:

a:hover { text-decoration: underline; }

li:first-child { color: red; }

li::before { clear:both; margin :2px; }

PSEUDO-CLASSES

When a pseudo-class is added to an element, that element will only be styled when it becomes that state. For instance if you add the ( :hover ) keyword to any selector, that selector will only be styled when someone hovers over it. Such as when you put your cursor over a link.

The list of pseudo classes:

Feel free to read more about them in your own time.

Pseudo-classes examples

In this part let’s do an example. We are going to use the sample snippets of html we used in the last post about attribute selectors. It will be a list with links .

The HTML:

Copy the following HTML code , save it as a html file and follow along with me.  Put your CSS within the <style> tag.

<!DOCTYPE html>

<html>

<head>

    <title> Learning about Selectors - BIZANOSA.COM</title>
    <style>
        #mainNav {

          list-style-type: none;

          margin: 20px;

          padding: 20px;

          background-color: #222;

                }

       li{display: inline; padding: 20px;}

       a{color: white; font-size: 20px}

</style>

</head>

<body>

 <ul id="mainNav">

                <li><a href="https://bizanosa.com" title="This is the homepage">Home</a></li>

                <li><a href="https://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li>

                <li><a href="https://bizanosa.com/sp" title="Page Homefor skillshare">Skillshare</a></li>

                <li><a href="https://bizanosa.com/qt" title="homepage for quotes" >Quotes</a></li>

</ul>

</body>

</html>

Objectives:

  1. Make links bolder and yellow on hover .
  2. Add a white border around the first list item only
  3. Add a yellow border around the last list item only
  4. Make alternating list items in even positions be in UPPERCASE

THE CSS

The css to do all the above is below. Feel free to experiment with all the other possible pseudo classes.

/*1.Make links bolder and yellow on hover .*/

    a:hover{color: yellow; font-weight: 600;}

    /*2.Add a white border around the first list item only*/

    li:first-child{border: 2px solid white;}

    /*3.Add a yellow border around the last list item only*/

    li:last-child{border: 2px solid yellow;}

    /*4.Make even alternating list  items be in  UPPERCASE.*/

   li:nth-child(even){text-transform: uppercase;}


Pseudo-elements

pseudo-elements are just like the pseudo classes but these are preceded by two colons ( :: ) .

Some pseudo elements you may come across include:

Feel free to read more about them.

Example for the CSS Pseudo-element selectors

Let’s say we have the following HTML :

<ul id="mainNav">

 <li><a href="https://bizanosa.com" title="This is the homepage">Home</a></li>

 <li><a href="https://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li>

 <li><a href="https://bizanosa.com/sp" title="Page Homefor skillshare">Skillshare</a></li>

  <li><a href="https://bizanosa.com/qt" title="homepage for quotes" >Quotes</a></li>

</ul>

<p> The FIRST Paragraph is here.This is the first Paragraph  </p>

<p> The SECOND Paragraph is here.This is the second Paragraph  </p>

<p> The THIRD Paragraph is here.This is the third Paragraph  </p><br><br>

Objectives

  1. Make First Letter of each paragraph huge and purple.
  2. Add >>  after each link item

THE CSS :

The CSS for achieving the above objectives is below. Feel free to play around with the CSS. Try things out, that’s when you learn.

/*1 Make First Letter of each paragraph huge  */
 p::first-letter { font-size: 50px; color: purple; }


 /*2. Add >> after each link item */
 a::after { content: " >> " }


That’s it for this post, we’ll continue in the next post.

To learn HTML and CSS, click the button below:

Recommended VPS Providers

Find out the VPS providers I recommend.

Comment Here

We use cookies on Bizanosa.com. Continuing to use this website, implies consent of our Privacy Policy Privacy Policy

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close