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

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay