Universal selector
*
- targets all elements on the page
Element/tags
Target all p
elements
p {
color: red;
}
IDs
IDs must be unique on a page and are targeted using a #
(hash) e.g.
#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.
.some-nav {
display: flex;
}
Sibling and adjacent selectors
- Descendant combinator This is represented by a space between selectors e.g.
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.
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
// 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.
// 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 ishtml
-
: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; }
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: '◆';
}
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;
}
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!
Top comments (0)