Seperate selectors with a plus (+). This targets the first sibling if it matches the selector after the + symbol (that comes after the initial selector, not before).
Note: if the first sibling after the selector does not match, it does not keep going through the siblings to find a match.
General Sibling Selector (~)
Seperate selectors with a tilde (~). This targets every sibling that matches the selector after the + symbol (that comes after the initial selector, not before).
p ~ div{
background: green;
border: solid 1px blue;
}
<div class="Parent">
<div class="Child">
<div class="Grandchild"></div>
</div>
<p class="Sibling"></p>
<div class="Sibling"></div>
<div class="Sibling"></div>
</div>
CSS [attribute] Selector
Target an element based on an attribute
You can target elements based on if they have specific attributes, and further if those specific attributes have or partially match values for those attributes, using [], [=""], [~=""], [|=""], [^=""], [$=""], and [*=""]
a[target] {
background-color: green;
}
These target objects that match the attribute and the specific value. (Important note, class, href, id, etc. are all attributes.)
Note: they only target full matches, so the second one, which has another value in the quotes does not work.
Attribute with at least one matching value [attribute~="value"]
This targets an element based on if it contains the matching text in the value seperated by a space.
img[title~="flower"] {
border: 5px solid blue;
}
<img src="link">
<img title="flower" src="link">
<img title="flowers" src="link">
<img title="flower tulips" src="link">
Attribute with exact value, or a value that is immediately followed by a hyphen (-) [attribute|="value"]
This targets an element based on if the specified attribute has a value that is the one specified, or the value matches before a hyphen as a value.
div[class|="hvr"] {
border: 5px solid blue;
}
<div class="hover">text</div>
<div class="hvr">text</div>
<div>text</div>
<div class="hvrsm-grow">text</div>
<div class="lg-hvr-grow">text</div>
<div class="hvr-shrink">text</div>
Attribute that starts with specific value [attribute^="value"]
This targets an element based on if the value for specified attribute starts with the value specified.
div[class^="top"] {
border: 5px solid blue;
}
<div class="top-glow">text</div>
<div class="smalltop">text</div>
<div>text</div>
<div class="topdown">text</div>
<div class="t o p">text</div>
<div class="top">text</div>
Attribute that ends with specific value [attribute$="value"]
This targets an element based on if the value for specified attribute ends with the value specified.
div[class$="test"] {
border: 5px solid blue;
}
<div class="Test">text</div>
<div class="small-test">text</div>
<div class="test-note">text</div>
<div>text</div>
<div class="visualtest">text</div>
<div class="test">text</div>
Attribute that contains part of a specific value [attribute*="value"]
This targets an element based on if the value for specified attribute contains part of the value specified.
div[class*="qu"] {
border: 5px solid blue;
}
<div class="quest">text</div>
<div class="q-u">text</div>
<div class="smallquip">text</div>
<div>text</div>
<div class="this-quiet">text</div>
<div class="Quick">text</div>
CSS Pseudo-classes
Target specified parts or orders of elements.
When you are targeting elements, you can select a portion of the element, a specific state of an element, or a certain number/order of elements, by puttings a colon (:) after the element, and adding a specific identifier.
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
Style an anchor tag (<a&rt;) if it's an unvisited or visited link, if it's been hovered over, or selected.
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: blue;
}
/* mouse over link */
a:hover {
color: green;
}
/* selected link */
a:active {
color: purple;
}
The hover property mentioned before can be used on any html element.
div:hover{
background-color: green;
}
Hover over me!
First child :first-child
Select the first child specified among any group of siblings.
div:first-child {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Last child :last-child
Select the last child specified among any group of siblings.
div:first-child {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
:nth-child() Selector
The first & last child selectors are only limited to the first or last instance of a selector in group, if you want to be more specific, like targeting the third child, or every 4th one, you'd want to use an n-th child selector.
Select every element specified that is the nth child of its parent. n can be a number, keyword (odd or even), or even a formula (like 2n + 3).
Number nth-child :nth-child(n)
Select the nth element specified among any group of siblings.
div:nth-child(2) {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div:nth-child(14) {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Keyword nth-child :nth-child(odd/even)
Select every odd or even numbered element specified among any group of siblings.
div:nth-child(odd) {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div:nth-child(even) {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Formula nth-child :nth-child(an + b)
Select every element specified formulaically among any group of siblings.
div:nth-child(4n) {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div:nth-child(n + 7) {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div:nth-child(3n - 2) {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Try it editor
Type in this input to see different formulas for the nth child selector!