Universal selector
Selects everything!
* {
color: red;
}
Adjacent selector
Selects only the element that is immediately proceeded by the former element! e.g. only the first paragraph after each h1.
h1 + p {
color: red;
}
X > Y
Selects direct children e.g. will not select the nested ul
// HTML
<ul class="ul">
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
// CSS
.ul > li {
border-left: 1px solid red;
}
Sibling combinator
Similar to the adjacent selector but will select any elements as opposed to the ones immediately preceded.
ul ~ li {
border: 1px solid red;
}
Attribute selector
input[type=text] {
color: red;
}
LInks selector
Similar to the adjacent selector but will select any elements as opposed to the ones immediately preceded.
a[href="http://webknit.co.uk"] {
color: red;
}
// webknit must appear somewhere in the href
a[href*="webknit"] {
color: red;
}
// Reads the beginning of the href
a[href^="http"] {
color: red;
}
// Reads the end of the href
a[href$=".co.uk"] {
color: red;
}
X:checked
Selects elements that are checked, such as radio, checkbox
input[type=radio]:checked {
color: red;
}
X:after, X:before
Generates content around the selected element;
a:after {
background-image: url(someicon.jpg);
content: "";
display: block;
height: 30px;
width: 30px;
}
X:not
Selects element that is NOT something, e.g. select all divs but not the one with classname
div:not(.classname) {
color: red;
}
X::pseudoEl
Selects individual parts of an element
X::first-letter {
font-size: 3rem;
}
X:nth-child(n)
Selects specific elements, is not zero based. e.g selects 2nd li element
li:nth-child(2) {
color: red;
}
X:nth-last-child(n)
Selects specific elements from the back, is not zero based. e.g selects 2nd last li element
li:nth-last-child(2) {
color: red;
}
X:nth-of-type(n)
Selects only the type of element. e.g selects the 2nd ul
ul:nth-of-type(2) {
color: red;
}
X:nth-last-of-type(n)
Selects only the type of element from the back. e.g selects the 2nd last ul
ul:nth-of-type(2) {
color: red;
}
X:first-child
Selects only the first child of the parent. e.g selects the 1st li in ul's
ul li:first-child {
color: red;
}
X:last-child
Selects only the last child of the parent. e.g selects the last li in ul's
ul li:last-child {
margin-bottom: 0;
}