CSS Pseudo Classes & Pseudo Elements for beginners [2022]

On By DrewIn css, html

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 colour when it is clicked

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.

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.

Leave a comment