Basic CSS selectors for your toolbox

Here are some ways of selecting elements. This is not a comprehensive list. Good to keep in your back pocket.

Universal Selector

Selects everything. All elements will get this colour black.

* {
   color: black;
}

Element Selector

Selects all of an elements by the type specified.

img {
   width: 100px;
   height: 100px;
}

Class Selector

Selects all elements or element with the class name provided.

.delete {
   color: red;
} 
.my-list {
   font-size: 20px;
}

Descendant Selector

Selects all elements nested within another element you specify. In the example below all a within an li will be blue.

li a {
   color: blue;
}

Can be used with a class too.

.myList a {
   color: blue;
}

Adjacent Selector

Selects an element if the combination is correct. So say we have a h2 next to a p. We might want to colour every paragraph that comes after a h2.

<h2>Hello World</h2>
<p>Test</p>

h2 + p {
   color: pink;
}

Direct Child

Selects direct children elements. For example if we want to colour all paragraphs that are directly next to a div we could use.

div > p {
   color: purple;
}

Note it only selects directly nested not any elements that are nested further with. In the code below “Hello World” would be coloured purple but not the further nested a tag.

<div>
<p>Hello world<a href='link'>Link</a></p>
</div>

Attribute Selector

Selects element based on their attribute. For example in a form we may have.

input[type=‘text'] {
  border: 2px solid black;
}

Now all inputs that have the type text. All other input element will be left alone.

Can also be handy to know you can style boolean elements such as a checkbox.

input[checkbox] {
   height: 40px”
}

Pseudo Classes

These keywords are added to selector specifying a state of the selected element to elements.

To name a few:

• :active
• :checked
• :first
• :first-child
• :hover
• :not()
• :nth-child()
• :nth-of-type()

For example we often want to style something when we put our cursor over it. In the example below our li elements will show a border underneath and the cursor will be the pointer hand when we move our mouse over it.

Hover

li:hover {
   border-bottom: 1px solid black;
   cursor: pointer;
}

Focus

Or often when using inputs you may want a style to let users know. In the example the input will revieve a border when it’s clicked and ready to be type in.

input:focus {
   border: 2px solid pink;
}

Visited

Used for colouring links and pages that the use has visited.

a:visited {
   color: purple;
}

Nth Of Type

Selects a recurring element that is specified by a number and ’n’ you pass in. For example the code below will colour every 3rd paragraph.

p:nth-of-type(3n) {
  color: blue;
}

First Of Type

Selects the first element of the type. For example if you want the first li coloured red you could use the example below.

li:first-of-type {
   color: red;
}

There is more pseudo classes but i'll leave that to you to look at if you fancy.

Pseudo Elements

A key word added to a selector for styling specific part of the element.

Examples:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection

First Letter

Let’s say you want the first letter of a h1 to be larger. Like from an old book. You can use the ::first-letter selector.

h1::first-letter {
  font-size: 55px;
}

Highlight Colour Selection

If you want to change the colour of when you click and highlight text. You can use ::selection.

Select all text highlight

::selection {
    background-color: pink;
    color: orange;
}

Select just paragraph highlights

p::selection {
    background-color: pink;
    color: orange;
}

::after and ::before

Used for adding cosmetic things either before or after a specified element.

a::after {
  content: "→";
}
a::before {
  content: “☀︎”;
}

Let's connect

Twitter