CSS Combination


comma (,)

[css selector: h1, h2, h3, h4, h5, h6]
Groups of selectors on one rule

Descendant Selector ( space ) [ #myList ol li ]

Decedent Selectors allow you to apply styles to elements that are contained within another.

Ways to Apply CSS

  1. Inline
  2. Internal
  3. External

Child Selector (>) [ div > p ]

If you want to choose only direct children, we can use the child selector with the greater than symbol (>). This selects child elements that are directly under the parent element.

Hello World.

Hello Mars!

Second Hello Mars!

Adjacent Sibling Selector (+) [ #sibling3+li ]

Sibling elements are those that have the same parent, and adjacent siblings are those that are right next to each other.

  1. Sibling 1
  2. Sibling 2
  3. Sibling 3
  4. Sibling 4
  5. Sibling 5

General Sibling Selector (~) [ #sibling22~li ]

To broaden our scope to all siblings proceeding the selection, we use a tilde (~). This will select all elements that are of a sibling that come after the selected item.
  1. Sibling 1
  2. Sibling 2
  3. Sibling 3
  4. Sibling 4
  5. Sibling 5

CSS Specificity Hierarchy

  1. In-line,
  2. IDs (#example),
  3. Classes (.example),
  4. Element (h?, ui, li, p)
  5. Equal specificity: the latest rule counts
  6. !important overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later