> *pseudo* - fake, false, not genuine
Pseudoclasses are treated just like classes in CSS, but they are not classes. They are subsets of HTML tags (and other classes) that tell an element how to behave in certain circumstances. You can code them in CSS just like other classes.
Some of the most common pseudoclasses are;
- **hover** - activates when your mouse goes over the element.
- **active** - best used on an anchor tag if you are already visiting the page.
- **disabled** - when you need to make an interactive element (anchor, button, an option in a select) visible, but don't want the user to interact with it
- ***nth-child*** - when you want every other tag, or certain patterns of tags to appear different than others. Very common with tables and making every other line have a background colour.
The format of CSS for pseudoclasses is not too dissimilar to other classes, however rather than indicating it with a period, you use a colon.
This is an example of coding for a class
```
a.myClass {
...
}
```
This is an example of coding for a pseudoclass
```
a:active {
...
}
```
This is an example of coding for a pseudoclass of a class
```
a.myClass:hover {
...
}
```
# Pseudoclass Usage Example
Consider the following segment of HTML, and think of it as if we were on the "about.html" page.
```
<div>
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact Us</a>
</div>
<div>
<a class="submenu" href="map.html">Find us on a map</a>
<a class="submenu" href="history.html">Read our History</a>
</div>
```
We can make these anchor tags appear a specific way, and we can get a lot of work done at once.
If we want all the anchor tags to have the same colour of text, background, and shape, we can combine things in our CSS:
```
a, a.submenu {
background-color: blue;
margin: 5px;
color: white;
padding: 0.5em;
border-radius: 5px;
font-family: Verdana, sans-serif;
}
```
We can also set some specific differences by adding further information in another codeset. In this example, the "submenu" class of the anchor tags will appear just like every other anchor tag, except that the font size will be three-quarters the size of the regular font size.
```
a.submenu {
font-size:0.75em;
}
```
Now we can set our pseudoclasses, such as the behaviour when a mouse goes over it ...
```
a:hover, a.submenu:hover {
background-color: grey;
}
```
... and what happens if we happen to be visiting that page ...
```
a:active, a.submenu:active {
background-color: grey;
color: blue;
font-weight:900;
}
```
# Parents and Children
In HTML, when you have "nested" tags (tags within other tags), we give them a "Parent-Child-Sibling" relationship. This matters with the *nth-child* pseudoclass.
Consider the following code;
```
<div>
<span>Hello</span>
<p>A paragraph</p>
<table>
<tr>
<td>A row</td>
<td>A second row</td>
</tr>
</table>
</div>
```
- In this code, the `<span>`, `<p>`, and `<table>` tags are all children of the `<div>` tag. They inherit the genes of their parent, or in coding they inherit the CSS of their parent.
- Likewise the `<tr>` is a child of `<table>`, and the two `<td>` are children of the `<tr>`. The CSS is passed down through the generations.
- All children of a parent are siblings, so the two `<td>` tags are considered siblings.
This all impacts the *nth-child* pseudoclass. Consider the following code;
```
<ol class=“{ReplaceWithTheClassYouWant}”>
<li>First Child</li>
<li>Second Child</li>
<em>Third Child</em>
<li>Fourth Child</li>
<li>Fifth Child</li>
<li>Sixth Child</li>
<li>Seventh Child</li>
</ol>
```
Consider the following CSS that could be applied to the above HTML ...
```
ol.evens li:nth-child(even) { color: red; }
ol.odds li:nth-child(2n+1) { font-size: 2em; }
ol.thirds li:nth-child(3n+2) { font-weight: 900; }
ol.onlyli li:nth-of-type(odd) { font-style: italic; }
```
Copy and paste this into a Codingville Project to experiment with it, and learn how the *nth-child* pseudoclass works.