A Complete Guide to CSS Selectors Pt.2

Welcome into the second part of our Complete guide to CSS selectors. In first part we explored the basic ones and ended up with attribute selectors. Today we will continue with pseudo-classes and pseudo-elements. Those of you who are not that grounded in selectors should look at Pt1 first. However, if you are ready, we can continue in our guide.

Series begins in part 1.


This is something called custom attribute. With this attribute you can select elements on random data attributes. You can use any attribute you want like data-name, data-info, data-type etc.


<a href="....." data-filetype="image">Lorem picture<a/>


a[data-filetype="image"] {}


This will apply to all elements when you click on them (active elements). You can use this pseudo-class to any element you want and not just anchor tag.

a:active {
  color: #c00;

div:active {
  border: 1px solid black;


This will apply to all elements when you hover over them. This is, as :active, applicable to any element.

section:hover {
  background: tomato;

a:hover {
  text-decoration: underline;


Rules for this pseudo-class will apply to all links that were already visited (clicked on). This works only with anchor tags.

a:visited {
  text-decoration: line-through;


This selects an element which has focus (selected by “Tab” key).

input:focus {
  color: #dd5230;


This selects all unvisited link (anchor tags) on the page.

a:link {
  text-decoration: none;

Pseudo classes

Pseudo classes bellow works only for <input> elements


This selects all input elements that were checked.

input:checked {
  color: #ff2233;


This will select all input with attribute “disabled”.

input:disabled {
  background: #aaa;


This is same as disabled but selects all enabled elements.

input:enabled {
  background: #2ecc71;


This pseudo-class will select all inputs with specified attribute “required”.

input:required {
  color: #c0392b;


While “required” selects all inputs with that attribute, this one will select all the rest of them (not required).

input:optional {
  color: #3498db;


This will select all input elements with valid value.

input:valid {
  background: #1abc9c;


This selects all inputs with invalid value.

input:invalid {
  background: #e67e22;


This pseudo-class will select all inputs with value in specified range.

input:in-range {
  backround: #ecf0f1;


This selects input with value out of specified range.

input:out-of-range {background: #34495e;}


All elements with “readonly” attribute will be selected.

input:read-only {
  font-size: 1.2em;


This is opposite to “readonly”. Every element which does NOT have this attribute (“readonly”) will be selected.

:input:read-write {
  font-size: .8em;

CSS selectors for typography

These selectors are usable only with text elements.


This will simply select the first letter of text inside element.

h1::first-letter {
  color: gray;


Selects the first line of text inside element.

p::first-line {
  line-height: 1.5em;


This selector will select all elements with specified language in “lang” attribute.

p:lang(en) {
  text-align: center;


This pseudo-class will simply generate content after the selected element.

.clearfix:after {
  display: block;
  visibility: hidden;
  content: '';
  clear: both;
  height: 0;
  font-size: 0;


This selector, on the other hand, generate content before an element

div:before {
  position: absolute;
  content: '';
  width: 20px;
  height: 60px;
  background: #eee;


The negation pseudo-class will select all element except the one specified in bracket. To select all elements without class of “red”:

*:not(.red) {
  color: white;

NOTE: In IE, the negation pseudo-classes is supported only from version 9 and higher!


First child pseudo-class will select the very first element. So, if you have three paragraphs and want just the first one:

p:first-child() {
  font-weight: bold;

NOTE: In IE, the first-child pseudo-classes is supported only from version 7 and higher!


Last child will select the last element.

p:last-child() {
  font-style: italic;

NOTE: In IE, the last-child pseudo-classes is supported only from version 9 and higher!


When you need to select some specified element from a stack you will use this pseudo-class. It is NOT zero based, so to select the fourth list item:

li:nth-child(4) {
  text-decoration: underline;


This works almost same as nth-child, except it selects elements from the end. To select the third for the last item:

li:nth-last-child(3) {
  font-size: 80%;


This will selects all elements which are only child of its parent.

p:only-child {
  font-family: serif;

NOTE: In IE, the only-child pseudo-classes is supported only from version 9 and higher!


This works the same as first child, but selection depends on specified type of element.

p:first-of-type {
  padding: .25em;


Also similar to last-child. To select the last div:

div:last-of-type {
  margin: 0 auto;


Like with nth-of-child, this pseudo-class will allow you to select random element type by specifying its number in order. To select fifth span:

span:nth-of-type(5) {
  color: #bdc3c7;


With this you can, as with nth-last-child pseudo-class, select an element but starting from the end. To select seventh paragraph from the end:

p:nth-last-of-type(7) {
  font-weight: bold;


Selects every element that is the only element of its parent.

h1:only-of-type {
  text-indent: 1.5em;

NOTE: any “-of-type” pseudo-classes are not supported in IE 8 and earlier and Firefox lower than 3.5 (Chrome and Opera support is not limited).

Closing thoughts on CSS selectors

Finally, we arrived on the end of the Complete guide to CSS selectors. In this part we discussed more advanced CSS selectors and some of them (type and child) have some issues with support mainly in IE browser. Always keep that in mind while using to avoid getting into some unnecessary troubles. I hope you like this guide and will use what you’ve learned in your work.

If you liked this article, please subscribe so you don't miss any future post.

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

By Alex Devero

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.