CSS Selectors

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;
}