CSS Combination

https://thecssworkshop.com/lessons/combinators

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

Inline
Internal
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.

Sibling 1
Sibling 2
Sibling 3
Sibling 4
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.

Sibling 1
Sibling 2
Sibling 3
Sibling 4
Sibling 5

CSS Specificity Hierarchy

https://www.w3schools.com/css/css_specificity.asp

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

Sample

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

<div id="test"> <span>Text</span> </div> div#test span { color: green; } /* more specific, ID inside Element, followed by element 'span' end result will be here */ div span { color: blue; } span { color: red; }

Text

body h1 { color: green; } html h1 { color: purple; /*this is used since it declared late */ }