Selectors en de cascade

Als twee regels hetzelfde element verschillende kleuren geven, gokt CSS niet. Het vergelijkt de selectors en een id wint van elk aantal classes.

Elementen kiezen

Een selector is een patroon dat overeenkomt met elementen op de pagina. De eenvoudigste selecteren op elementnaam, class of id. p is een typeselector en selecteert elke alinea. .note is een classselector en selecteert elk element met class="note"; één element kan meerdere classes hebben, gescheiden door spaties, en één class kan op veel elementen worden gebruikt. #intro is een id-selector en selecteert het ene element met id="intro". *, de universele selector, selecteert alles.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Selectors combineren

Een komma groepeert selectors met dezelfde declaraties, dus h1, h2 geeft beide opmaak. Een spatie is de afstammelingencombinator: nav a selecteert links overal binnen een nav, hoe diep ook. > is strenger en selecteert alleen directe kinderen. Als je twee eenvoudige selectors zonder spatie tegen elkaar schrijft, zoals a.active, moet één element met beide overeenkomen: een link die ook de class active heeft. Attribuutselectors tussen vierkante haken selecteren op attribuut, zoals input[type="email"].

Pseudoklassen, geschreven met één dubbele punt, selecteren elementen in een bepaalde toestand of positie: :hover wanneer de aanwijzer erboven staat, :focus-visible wanneer het toetsenbordfocus heeft, :first-child wanneer het het eerste kind van zijn ouder is. Pseudo-elementen, geschreven met twee dubbele punten, geven een deel van een element opmaak, zoals ::first-line of ::placeholder.

Als regels elkaar tegenspreken

Vaak stellen meerdere regels dezelfde eigenschap op hetzelfde element in. De cascade, de C van CSS, bepaalt welke wint. Als je de eigen browserstijlen en !important buiten beschouwing laat, beslissen twee vragen bijna elk geval. Ten eerste: welke selector is specifieker? Specificiteit wordt geteld als drie getallen: ids, dan classes (inclusief attribuutselectors en pseudoklassen), dan elementnamen. #menu a scoort 1-0-1, .active scoort 0-1-0 en nav a scoort 0-0-2. Je vergelijkt de getallen vanaf links, dus één id wint van elk aantal classes. Ten tweede: bij gelijke specificiteit wint de regel die later in de stylesheet staat.

Inline style-attributen winnen van elke selector en een declaratie met !important wint van normale declaraties. Beide zijn verleidelijke snelle oplossingen, maar maken de volgende wijziging moeilijker, omdat je ze alleen met meer van hetzelfde kunt overschrijven. De meeste teams houden specificiteit laag en gelijkmatig en geven vooral met classes opmaak, zodat de volgorde in het bestand genoeg is om het resultaat te voorspellen.

Overerving

Sommige eigenschappen gaan automatisch van ouder naar kind. Stel color of font-family in op body en elke alinea, lijst en tabelcel erin neemt die over, tenzij een regel een eigen waarde instelt. Teksteigenschappen erven doorgaans over; blokeigenschappen zoals width, padding, border en margin niet. Daarom verschijnt een rand rond een sectie niet rond elke alinea erin. Het sleutelwoord inherit dwingt een eigenschap de waarde van haar ouder over te nemen.

Geef classes een naam naar wat iets is, niet naar hoe het eruitziet. .warning blijft logisch als de ontwerper de kleur van rood in oranje verandert; .red-text niet. Ids zijn uniek, dus bewaar ze liever voor linkdoelen en formulierlabels dan voor opmaak, om de specificiteit laag te houden.