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:
- :active
- :any
- :checked
- :default
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :fullscreen
- :focus
- :hover
- :indeterminate
- :in-range
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :valid
- :visited
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:
- Make links bolder and yellow on hover .
- Add a white border around the first list item only
- Add a yellow border around the last list item only
- 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
- Make First Letter of each paragraph huge and purple.
- 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:
