Categories

1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute value)

Simple selectors

element selector

p {
  text-align: center;
  color: red;
}

class selector

.center {
  text-align: center;
  color: red;
}

id selector

#para1 {
  text-align: center;
  color: red;
}

Universal selectors

* {
  text-align: center;
  color: blue;
}

Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:

1. descendant selector (space)
2. child selector (>)
3. adjacent sibling selector (+)
4. general sibling selector (~)

Union

h1, span{
  color: green;
  font-size: 20px;
}

Intersect

div.red {
  font-size: 30px;
}

Descendant

/* select all span elements with div as root */
div span {
  font-size: 15px;
  color: orange;
}

Child

/* select all the p elements with div as parent */
div > p {
  font-size: 15px;
  color: orange;
}

Adjacent sibling

/* Select the adjacent element beside span, cannot be selected if exists other element between them*/
p + span {
  color: red;
}

General sibling

/* select all the span after p of the same level*/
p ~ span {
  color: red;
}

Pseudo-class selectors

Element

/* 
  first-child
  last-child
  nth-child(): 
    if the parameter is n, means select all element
    2n/even means select the even position elements
    2n+1/odd means select the odd position elements
  Note: All the elements above is sorted based on the children elements

  :first-of-type
  :last-of-type
  :nth-of-type()
  Note: The usuage is the same with the previous method, the different is sorted base on the same type

  :not(): negative pseudo-class selectors：
*/

/* select the first element of li with parnet ul */
ul > li:first-child {
  color: red;
}

/* select the third element of li with parnet ul */
ul > li:not(:nth-child(3)){
  color: orange;
}

Hyperlink

/* Hyperlink related */
/* the links that do not be accessed */
a:link {
  color: red;
}
/*
   the links that have been accessed
   Note: only the color can be modified because of privacy
 */
a:visited {
  color: orange;
}

/* :hover means the mouse move in */
a:hover{
  color: aqua;
  font-size: 50px;
}

/* :active means has been clicked*/
a:hover{
  color: yellowgreen;
}

Pseudo-elements selectors

Attribute selectors

/* Attribute selector: Select all p elements with attribute title */
p[title]{
  color: orange;
}

/* Attribute selector: Select all p elements with attribute title=abc */
p[title=abc]{
  color: orange;
}

/* Attribute selector: Select all p elements with attribute title with value start with abc */
p[title^=abc]{
  color: orange;
}

/* Attribute selector: Select all p elements with attribute title with value end with abc */
p[title$=abc]{
  color: orange;
}

/* Attribute selector: Select all p elements with attribute title with value contains abc */
p[title*=abc]{
  color: orange;
}

The priority of selectors

Inherit styles < Universal selectors < element selectors < class and pseudo clss selector < id selector < inline selector

When comparing priorities, the priorities of all selectors need to be added together (calculated separately when grouping selectors). The accumulation of selectors will not exceed its maximum magnitude (the accumulation of class selectors will not exceed the id selection). device), if the priorities are the same, the lower style will be used limitedly.

Info

The !important can be added to the end of a style, then the style will get the highest priority, even exceed inline style.