DEV Community

Chloe
Chloe

Posted on • Originally published at cgweb.co.uk on

2 1

CSS Selectors

Universal selector

* - targets all elements on the page

Element/tags

Target all p elements

p { 
  color: red; 
} 
Enter fullscreen mode Exit fullscreen mode

IDs

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

#my-page { 
  background-color: yellow; 
  color: red;
} 
Enter fullscreen mode Exit fullscreen mode

Classes

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

.some-nav { 
  display: flex; 
} 
Enter fullscreen mode Exit fullscreen mode

Sibling and adjacent selectors

  • Descendant combinator This is represented by a space between selectors e.g.
main p { 
  padding: 1rem 0; 
} 
Enter fullscreen mode Exit fullscreen mode
  • Child combinator > - this is placed between two selectors and will match only elements that are direct children of the first element e.g.
div > span { 
  background-color: #333; color: #fff; 
} 
Enter fullscreen mode Exit fullscreen mode
  • General Sibling combinator ~ - this will match all iterations of the second element following the first and are children of the same parent
// Targets any paragraphs that are siblings of and follow h2 
h2 ~ p { 
  color: blue; 
} 
Enter fullscreen mode Exit fullscreen mode
  • 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.
// Any paragraphs that follows a h2 element 
h2 + p { 
  color: red; 
} 
Enter fullscreen mode Exit fullscreen mode

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.
a { color: #CC0000; } 
a:hover { color: #000000; font-weight: bold; } 
Enter fullscreen mode Exit fullscreen mode

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.

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

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

a::before { 
  content: '◆'; 
} 
Enter fullscreen mode Exit fullscreen mode

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?
a[title]{ 
  color: green; 
} 

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

a[href$=".com"]{ 
  color: blue; 
} 
Enter fullscreen mode Exit fullscreen mode

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!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs