Specificity and The Cascade

CSS Specificity

The Sibling Combinator

Adjacent Combinator

  • The + combinator selects elements that are directly after the first element.
				
					H1 + p {

	}
				
			

Siblings Combinator

  • The ~ combinator selects siblings, the 2nd element must follow the 1st element (immediately or not), and must share the same parent.
				
					H1~p {

	}
				
			

Working with Pseudo-Classes

				
					Button:hover {

	}
				
			

Others, like

  • Enable
  • Disable
  • Read-only
  • Read-write
  • Placeholder-shown
  • Default
  • Checked
  • Indeterminate
  • Blank
  • Valid
  • In-valid
  • in-range
  • out-of-range
  • required
  • optional
  • user-invalid

 

Styling Pseudo-Elements

				
					P:first-of-type::first-letter {

}
ul.blah li:nth-child(even) {
    background-color: magenta;
}

				
			

The Basics of Specificity

  • When multiple rules with different selectors apply to the same element, which one wins out?
    1. Inline style
    2. ID style
    3. Class | attribute | Pseudo-Class
    4. Type | Pseudo-Element

Inline Styles and Specificity

  1. ID style
  2. Class | attribute | Pseudo-Class
  3. Type | Pseudo-Element
    • Div a have 0 0 2 have no ID, have no class but 2 Elements
    • .featured span have 0 ID, 1 class and 1 element
    • Div p.special have 0 ID, 1 class and 2 elements
    • .special + .main have 0 ID, 2 classes and 0 element.
    • And how to order it?

Important and The Cascade

                In the event of conflict, which rule “wins”?

  • Importance
    • Origin
      • Specificity
        • Position

Wrapping Up the Cascade

Importance

We can mark a declaration as important using the !important flag (generally not good idea)

				
					H1 {
    Color: purple !important;
	}

				
			

For more Information Check out the link

https://2019.wattenberger.com/blog/css-cascade

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp

Table of Contents

Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended

Read more about poetries

Ahmad Shafi Poetry

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *