Basic CSS selectors for your toolbox
Tags: css, webdev, beginners
Published: 2020-10-21 11:31:41

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.

```css
* {
   color: black;
}
```

## Element Selector 
Selects all of an elements by the type specified.

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

## Class Selector

Selects all elements or element with the class name provided.

```css
.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.

```css
li a {
   color: blue;
}
```

Can be used with a class too.

```css
.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`.

```html
<h2>Hello World</h2>
<p>Test</p>
```
```css
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. 

```css
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.

```html
<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.

```css 
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.

```css
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

```css 
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.

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

### Visited 

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

```css
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.

```css 
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.

```css
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.

```css
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**
```css
::selection {
	background-color: pink;
	color: orange;
}
```

**Select just paragraph highlights**
```css
p::selection {
	background-color: pink;
	color: orange;
}
```

### ::after and ::before

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

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

## Let's connect
[Twitter](https://twitter.com/davidbell_space)