Lesson 6: CSS Pseudo Classes
Pseudo classes are primarily concerned with state (If this then that). Easy examples of pseudo classes include the hover, active, and visited state on a link. A complete index of pseudo classes can be found here. For brevity I will go over a few that I use most often.
:hover
Hover has always been widely used, however in a mobile world I generally tend to discourage its use. Mainly because I am of the school of thought that your user experience should not change from mobile to desktop. This school of thought is generally known as responsive web design because the page adapts to screen sizes, rather than changes because of the screen size. Here is how you would use it on a link, but it can be applied to all HTML elements.
HTML:
<a class="link" href="http://www.google.com">Google</a>CSS:
.link {
text-decoration: none;
font-weight: bold;
color: white;
}.link:hover {
text-decoration: underline;
}
As you can see the selector for a pseudo class is a normal CSS selector followed by the colon and pseudo class name. In the browser this style would cause links to be rendered without an underline until the user hovers over the link.
More vital are the :visited and :active pseudo classes for links. :visited lets the user that they have already viewed the linked page and :active is the state that is displayed while a user long-clicks a link. They are implemented using the same syntax as :hover .
Child Pseudo Classes
One day you will find yourself in a situation where you need a CSS selector to select certain child elements. This can be confusing and is possibly the most complex thing that you will do with CSS. Most of the time you be able to select based on a pattern, or you will only need to grab the first or last child. In these instances there are some easy solutions.
:first-child & :last-child
These selectors do exactly what they suggest. They apply styles to only the first child or last child of the element.
:nth-child() & :nth-last-child()
These selectors will style the child at the specified position. To use these you need to specify what index needs to be styled by doing something like this: :nth-child(5) . This would style the 5th child element of the selector (keep in mind that children arrays are 0 based, which means that the first child will be 0, the second will be 1 and so on).
You can also pass ‘key words’ into the child selectors. These include ‘even’ and ‘odd’. When applied these would style all even indexed child elements (if that is what was passed in).
:nth-last-child() is the same as :nth-child() except that it begins counting at the last child index and moves in reverse.
:nth-of-type() & :nth-last-of-type()
These pseudo classes will select all elements at the specified position and of the selectors type. Type means element type, it does not mean class or attribute. Here is an example of how you could use these selectors:
div:nth-of-type(4) {
font-weight: bold
}This would make the font bold in the 4th div on the page. If we used the :nth-last-of-type pseudo class it would have styled the 4th to last div on the page.
Conclusion
There is a lot you can do with pseudo classes including styling all elements that fall within a pattern, like applying styles to every 4 elements. Pseudo classes can help you provide the end-user with a better user experience. There are only a few more things that I want to cover at the beginning level with CSS. These include flex-box and grid, both of which deal with page layout. Keep an eye open for them soon.
