Design Development WebDesign

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.

[data-filetype="value"]

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.

Example:

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

Example:

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

:active

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;
}

:hover

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;
}

:visited

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;
}

:focus

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

a:focus,
input:focus {
  color: #dd5230;
}

:link

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

:checked

This selects all input elements that were checked.

input:checked {
  color: #ff2233;
}

:disabled

This will select all input with attribute “disabled”.

input:disabled {
  background: #aaa;
}

:enabled

This is same as disabled but selects all enabled elements.

input:enabled {
  background: #2ecc71;
}

:required

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

input:required {
  color: #c0392b;
}

:optional

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

input:optional {
  color: #3498db;
}

:valid

This will select all input elements with valid value.

input:valid {
  background: #1abc9c;
}

:invalid

This selects all inputs with invalid value.

input:invalid {
  background: #e67e22;
}

:in-range

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

input:in-range {
  backround: #ecf0f1;
}

:out-of-range

This selects input with value out of specified range.

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

:read-only

All elements with “readonly” attribute will be selected.

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

:read-write

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.

::first-letter

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

h1::first-letter {
  color: gray;
}

::first-line

Selects the first line of text inside element.

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

:lang(language)

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

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

:after

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;
}

:before

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

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

:not

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

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

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!

:nth-of-child()

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;
}

:nth-last-child()

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%;
}

:only-child

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!

:first-of-type

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

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

:last-of-type

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

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

:nth-of-type()

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;
}

:nth-last-of-type()

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;
}

:only-of-type

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, then please consider subscribing.

Leave a Reply

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