SELECTORS

simple selectors

pseudo-class selectors

attribute selectors

pseudo-elements selectors

SIMPLE SELECTORS

/* universal selector */
* {
  font-family: 'Roboto', sans-serif;
}

/* element selector */
h1 {
  color: red;
}
  
/* id selector */
h1#promoted {
  color: green;
}
  
/* class selector */
h1.featured {
  color: blue;
}

ATTRIBUTE SELECTORS

/* basic attribute value selector */
[type="text"] {
  border: 1px solid black;
}

/* attribute value exact or starts 'val-' */
[attr|=val] 

/* attribute value exact or starts with 'val' */
[attr^=val] 

/* attribute value exact or ends with 'val' */
[attr$=val] 

/* attribute value contains 'val' */
[attr*=val] 

PSEUDO-CLASS SELECTORS

/* match the hovering state of a link */
a:hover {
  color: blue;
  font-size: 30px;
}

PSEUDO-ELEMENTS SELECTORS

/* add a character after each link */
a::after {
  content: '⤴';
}

COMBINING SELECTORS

/* all h1 and h2 are red */
h1, h2 {
  color: red;
}
  
/* all h1 in an article are red */
article h1 {
  color: red;
}
  
/* only h2 that come after an h1 are red */
h1 + h2 {
  color: blue;
}
  
/* all h3 that come after an h1 are red */
h1 ~ h3 {
  color: green;
}

VALUES

numeric

percentage

predefined list

colors

functions

NUMERIC VALUES

PERCENTAGE VALUES

LIST VALUES

COLOR VALUES

FUNCTION VALUES

rgb()

hsl()

calc()