23 CSS Selectors – PSEUDO Selectors

23 CSS Selectors – PSEUDO Selectors

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.

 

Join the FULL HTML and CSS Tutorial Here >>

 

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="http://bizanosa.com" title="This is the homepage">Home</a></li>
                <li><a href="http://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li>
                <li><a href="http://bizanosa.com/sp" title="Page Homefor skillshare">Skillshare</a></li>
                <li><a href="http://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="http://bizanosa.com" title="This is the homepage">Home</a></li>
<li><a href="http://bizanosa.com/abc" title="Coupons page not-home" >Coupons</a></li>
<li><a href="http://bizanosa.com/sp" title="Page Homefor skillshare">Skillshare</a></li>
<li><a href="http://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:

 

Join the FULL HTML and CSS Tutorial Here >>

 

 

 

 

 

 

The following two tabs change content below.
Just a geek who loves Trance . Be yourself everywhere you go. And Be yourself in everything you do. Cheers !

Comment Here