The Ultimate List of CSS Selectors
Tags: css, selectors
Published: 2018-04-04 08:19:10

---
title: The Ultimate List of CSS Selectors
published: true
description: A list of CSS selectors - everything you need in one place.
tags: CSS, selectors.
---

As a front-end developer who writes approximately 238 lines of CSS every day I needed this. Nothing in the following text is really mine, it is just collected from sources which are available to everyone (not just [w3schools](https://www.w3schools.com)). At the bottom of this post, you have this **ULTIMATE LIST image** which you can easily download.

**Pay attention to spaces!**

##Absolute Evergreens
`*`
All elements are selected.

`.banana`
All elements with class banana are selected.

`#banana`
All elements with id banana are selected.

`p`
All &lt;p> elements are selected.

##Relative Evergreens
`div, p`
All &lt;p> and &lt;div> elements are selected.

`div p` - descendent selector
All &lt;p> elements inside &lt;div> elements are selected.

`div > p` - direct children
All &lt;p> elements whose direct parent is &lt;div> are selected.
*It works backwords too (p &lt; div)* 

`div + p`
All &lt;p> elements places immediately after &lt;div> element are selected.

`div ~ p`
All &lt;p> elements that are preceded by a &lt;div> element are selected.

##Specific Category
*This class is often used for attributes :target, title, lang and href*.

`[title]`
All elements with the title attribute are selected.

`[title=banana]`
All elements which have the 'banana' value of the title attribute.

`[title~=banana]`
All elements which contain 'banana' in the value of the title attribute.

`[title|=banana]`
All elements which value of the title attribute starts with 'banana'.

`[title^=banana]`
All elements which value of the title attribute begins with 'banana'.

`[title$=banana]`
All elements which value of the title attribute ends with 'banana'.

`[title*=banana]`
All elements which value of the title attribute contains the substring 'banana'.


##Quasi-Evergreens
*These selectors are called **pseudo classes** and *they must stay with other selector and describe it's state or property*.

`:hover`
Selects elements when it is in the hover state.

`:link`
Selects elements if they are links (once with href attribute).

`:visited`
Selects elements if they have been visited.

`:active`
Selects elements when they are active (clicked).

`:focus`
Selects elements when they are focused.

`:checked`
Selects elements when they are checked.

`:required`
Selects elements with the required attribute.

`:optional`
Selects elements without the required attribute.

`:first-child`
Selects the first element within a parent.

`:nth-child(number)`
Selects the child element based on a number (if it's 2 then selects second child, if it's 2n then selects all the children in steam positions).

`:only-child`
Selects element only if it's the only child.

`:first-of-type`
Selects the first element of the type.

`:nth-of-type(number)`
Selects the child element of the type based on a number (if it's 2 then selects second of the type, if it's 2n then selects all children of the type in steam positions).

`:only-of-type`
Selects element only if it's only of the type.

`:empty`
Selects elements which contain no text or child elements.

For more pseudo classes check [this post](https://css-tricks.com/pseudo-class-selectors/)

*The next few selectors are called Pseudo Elements and they select just parts of elements*

`::before:`
Add content before the element (e.g. an opening quote, icon, image...).

`::after`
Add content after the element (e.g. a closing quote, clearfix...).

`::first-letter`
Selects the first letter of the element.

`::first-line`
Selects the first line of the element.

`::selection`
Selects a part of the element which is selected.


##Indie Hit
`* + *` - lobotomized owl
All elements that procede other elements.

![css-selectors---ultimate-hits-1](https://kolosek.com/content/images/2018/02/css-selectors---ultimate-hits-1.png)


This post is originally published on [Kolosek Blog](https://kolosek.com/css-selectors/).