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.
* {
color: black;
}
Element Selector
Selects all of an elements by the type specified.
img {
width: 100px;
height: 100px;
}
Class Selector
Selects all elements or element with the class name provided.
.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.
li a {
color: blue;
}
Can be used with a class too.
.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
.
<h2>Hello World</h2>
<p>Test</p>
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.
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.
<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.
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.
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
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.
input:focus {
border: 2px solid pink;
}
Visited
Used for colouring links and pages that the use has visited.
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.
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.
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.
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
::selection {
background-color: pink;
color: orange;
}
Select just paragraph highlights
p::selection {
background-color: pink;
color: orange;
}
::after and ::before
Used for adding cosmetic things either before or after a specified element.
a::after {
content: "→";
}
a::before {
content: “☀︎”;
}
Top comments (0)