CSS Selectors
Tags: css
Published: 2022-01-15 14:53:32

---
title: CSS Selectors
published: true
date: september 2021
tags: css
canonical_url: https://cgweb.co.uk/blog/css-selectors
---

### Universal selector 
`*` - targets all elements on the page

### Element/tags 
Target all `p` elements 
```css 
p { 
  color: red; 
} 
``` 

### IDs 

IDs must be unique on a page and are targeted using a `#` (hash) e.g. 

```css 
#my-page { 
  background-color: yellow; 
  color: red;
} 
``` 

### Classes

Classes are reusable and can be added to multiple elements to target them use `.` (dot) notation e.g.

```css 
.some-nav { 
  display: flex; 
} 
``` 

### Sibling and adjacent selectors 

- Descendant combinator This is represented by a space between selectors e.g. 

```css 
main p { 
  padding: 1rem 0; 
} 
``` 

- Child combinator `>` - this is placed between two selectors and will match only elements that are direct children of the first element e.g.

```css 
div > span { 
  background-color: #333; color: #fff; 
} 
```
- General Sibling combinator `~` - this will match all iterations of the second element following the first and are children of the same parent 

```css 
// Targets any paragraphs that are siblings of and follow h2 
h2 ~ p { 
  color: blue; 
} 
``` 

- Adjacent sibling combinator `+` - this will match the second element only if it directly follows the first element and both have the same parent e.g.

```css 
// Any paragraphs that follows a h2 element 
h2 + p { 
  color: red; 
} 
``` 

#### Pseudo Classes 

I have used several of these, but there are a couple I use for every project these are: 

- `:root` - this targets the root element usually this is `html` 
- `:hover` - can use this to change styling of an element when hovering over it with a pointing device e.g. 

```css
a { color: #CC0000; } 
a:hover { color: #000000; font-weight: bold; } 
``` 

#### Pseudo Elements 

These are added to a selector to target styling on a specific part of the selected element(s).

There are few that are available some of which I've never used but probably the most common are: 

- `::first-line` - style the first line of a paragraph 
- `::first-letter` - targets the first letter e.g.in a newspaper style 
- `::before` - the first child of the selected element often used with content for UI improvements one example may be to add quote marks or change the look of list elements 
- `::after` - as above but the last child of the selected element 

*Note the double colon is used to distinguish between pseudo elements and pseudo classes e.g.

```css 
.intro::first-letter { 
  font-size: 3rem; 
  padding-right: 1rem; 
} 

.intro::first-line { 
  font-weight: bold; 
} 

a::before { 
  content: '◆'; 
} 
``` 

### Attribute Selectors 

These are surrounded by `[]` 
- `[attr=value]` - exact match value 
- `[attr^=value]` - starts with 
- `[attr*=value]` - contains 
- `[attr$=value]` - ends with 
- `[attr~=value]` - elements with an attribute name of attr whose value is a whitespace-separated list of words one of which is exactly value and a new one I learnt researching these: 
- `[attr operator value i]` - adding i causes a case insensitive comparison for those in ASCII range having never used does anyone have a use case for this?

```css 
a[title]{ 
  color: green; 
} 

a[href^="https://"]{ 
  color: red; 
}

a[href$=".com"]{ 
  color: blue; 
} 
```

There are a few examples of some common and some useful selectors let me know if you think there are others I should have mentioned I'm sure there are!