MobileRead Forums - View Single Post

enuddleyarbl · 09-06-2024, 01:15 PM

Order of precedence for CSS falls under "specificity" (and trying to understand the rules hurts my brain). Here's a blurb on them:

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

Roughly, the order of precedence from highest to lowest is:
Inline styles - Example: <h1 style="color: pink;">
IDs - Example: #navbar
Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
Elements and pseudo-elements - Example: h1, ::before

Also, if all else is equal, the last selector defined wins.

09-06-2024, 01:15 PM	#10
enuddleyarbl Guru Posts: 781 Karma: 1538394 Join Date: Sep 2013 Device: Kobo Sage	Order of precedence for CSS falls under "specificity" (and trying to understand the rules hurts my brain). Here's a blurb on them: https://www.w3schools.com/css/css_specificity.asp Roughly, the order of precedence from highest to lowest is: Inline styles - Example: <h1 style="color: pink;"> IDs - Example: #navbar Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href] Elements and pseudo-elements - Example: h1, ::before Also, if all else is equal, the last selector defined wins.