23 CSS Selectors – PSEUDO Selectors
Check this out https://bizanosa.com/23-css-selectors-pseudo-selectors/
23 CSS Selectors – PSEUDO Selectors
Watch this video on YouTube
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:
 :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;                      lidisplay: inline; padding: 20px;       acolor: 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:
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:hovercolor: yellow; font-weight: 600; /*2.Add a white border around the first list item only*/ li:first-childborder: 2px solid white; /*3.Add a yellow border around the last list item only*/ li:last-childborder: 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:
::after
::before
::first-letter
::first-line
::selection
::backdrop
 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
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:
 Join the FULL HTML and CSS Tutorial Here >>
