![CSS Pseudo Classes & Pseudo Elements for beginners [2022]](https://m5.paperblog.com/i/724/7247395/css-pseudo-classes-pseudo-elements-for-beginn-L-IdxktY.png "CSS Pseudo Classes & Pseudo Elements for beginners [2022]")
Pseudo classes – define a special state of an element – for example a:hover (when a mouse pointer is over an element)
Pseudo elements – define the style for a specific part of an element. Pseudo elements use two colons , for example h1::after
Pseudo class examples
a:link pseudo class, defines the normal state of a link – i.e. before someone interacts with it.
a:visited pseudo class, defines the state of the link text when it has been clicked.
a:hover pseudo class defines what happens to the link text when the mouse hovers over it
a:active psuedo class, defines the text link color when it is clicked
![CSS Pseudo Classes & Pseudo Elements for beginners [2022]](https://m5.paperblog.com/i/724/7247395/css-pseudo-classes-pseudo-elements-for-beginn-L-rUmEMC.png "CSS Pseudo Classes & Pseudo Elements for beginners [2022]")
Drop Down Menu Using Pseudo Classes
One really cool thing you can do with pseudo classes, is to create a drop down menu.
W3 school lets anyone, yes anyone! use drop down classes, to create, well, drop down menus. The legends.
![CSS Pseudo Classes & Pseudo Elements for beginners [2022]](https://m5.paperblog.com/i/724/7247395/css-pseudo-classes-pseudo-elements-for-beginn-L-urULAg.png "CSS Pseudo Classes & Pseudo Elements for beginners [2022]")
In the codepen example above, I just put all this in my HTML, no CSS required. Madness.
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
</body>
</html>
Lists Styles
Apparently, list items are selected using “pseudo-selectors”.
By default lists include bullet points.
Use the – list-style-type property to change the style/numbers etc for each list item.
list-style-type: none – will remove any of the styles from the list – no bullet points or numbers etc.
If you want to style individual list items;
For example – ul li: first child { color:red; } will make the text of the first list item, red.
ul li: nth-child (3) { color:blue; } is another method (it’s actually a “CSS method” in technical terms), that in this case, will color the 3rd list item text blue.
Pseudo Elements
define the style for a specific part of an element. Pseudo elements use two colons , for example h1::after
Pseudo elements can be used to, for example, to style the first letter or line of a specific element
Insert content before a specific element
W3schools have some good info on pseudo elements here.
Some examples in the codepen below:
Before content
h1::before {
content: “this is a before thingy”;
color : green
before psuedo element, will put text before a specific element, there’s also “after”, which as you’ve probably guessed, places the content after the element.
