Websites met stijl

20. Selectors en borders

In dit hoofdstuk:

Selectors

We kennen nu de volgende selectors:

Een element

Voorbeelden: voorbeeld 1a div { } selecteert elk div element.

voorbeeld 1b nav { } selecteert elk nav element

Een element binnen een element

Een selector van de vorm element 1  element 2 selecteert alle elementen 2 binnen element 1.

Voorbeelden: voorbeeld 2a nav a { } selecteert elk a element (elke link) binnen het element nav.

voorbeeld 2b div p { } selecteert elk p element (elke alinea) binnen het element div.

Opmerking:
In voorbeeld 2a wordt een hyperlink ook geselecteerd als die zich in een ander element binnen het element nav bevindt, bijvoorbeeld een hyperlink in een p element in nav.
Evenzo wordt in voorbeeld 2b ook elke alinea geselecteerd die zich in een article binnen een div element bevindt.

Bij aanwijzen met de muis

Eindigt een selector op :hover dan wordt het betreffende element geselecteerd bij aanwijzing met de muis.

Voorbeelden:voorbeeld 3a div:hover { } selecteert elk div element dat wordt aangewezen met de muis

voorbeeld 3b nav a:hover { } selecteert elke hyperlink binnen nav die wordt aangewezen door de muis (elk aangewezen menu-item).

Met een bepaald attribuut

Staat achter een element de aanduiding [attribuut=waarde], dan wordt daarmee dat element alleen geselecteerd als het genoemde attribuut de betreffende waarde heeft.

Voorbeelden:voorbeeld 4a a[href=""] { } selecteert elke hyperlink met een lege href.

voorbeeld 4b a[target="_blank"] { } selecteert elke hyperlink met het attribuut target="_blank" (dat is elke hyperlink die opent in een nieuw venster).

Meer selectors

Behalve de hiervoor genoemde selectors, die we al kennen, komen ook de onderstaande selectors regelmatig voor:

Een element met een id

Voorbeelden:voorbeeld 5a div#container { } selecteert het div-element met de id container

voorbeeld 5b #container { } selecteert een element (het geeft niet welk) met de id container, bijvoorbeeld div#container of p#container of article#container.

Een element van een bepaalde class

Voorbeelden:voorbeeld 6a img.extra { } selecteert het img element van de class extra

voorbeeld 6b .naarboven { } selecteert alle elementen (het geeft niet welke) van de class naarboven, bijvoobeeld div.naarboven, p.naarboven, a.naarboven, article.naarboven.

Selector 1, selector 2, selector 3

Verschillende selectoren mogen worden gecombineerd, door ze achter elkaar te zetten, gescheiden door kommma's. De stijlregels gelden dan voor elk van de selectors.

Voorbeelden:voorbeeld 7a a, div, article { color: red; } Alle elementen a, div en article krijgen rode letters.

voorbeeld 7b nav, .extra, p.attentie { background-color:yellow; } Alle nav elementen, alle elementen van de class extra en alle alinea's van de class attentie krijgen een gele achtergrondkeur.

Subtiliteiten

Met selectors kun je precies aangeven welke elementen je wilt voorzien van bepaalde opmaak. Maar je moet goed letten op de verschillende punten, komma's, spaties.

Probeer maar te bedenken wat de stijlregels 1 t/m 5 hieronder precies betekenen. De moeilijkheid zit natuurlijk in de selector. Ik heb de kleuren weggelaten die de editor laat zien bij het intikken. Dat maakt het nog moeilijker!

stijlregel 1 div article { color: blue; }

stijlregel 2 div, article { color: blue; }

stijlregel 3 div .article { color: blue; }

stijlregel 4 div.article { color: blue; }

stijlregel 5 div, .article { color: blue; }

Zie de naslag selectors

Borders

De border is de rand om een element. In de komende hoofdstukken zullen we die verschillende keren tegen komen.

Als de rand aan alle zijden hetzelfde is, is de vorm: border: randdikte randstijl kleur ;

Rand alleen onder

In dat geval gebruik je de eigenschap border-bottom, bv. border-bottom: 1px solid grey;, een grijze lijn van 1px dikte aan de onderkant van het kader. Handig om een artikel af te sluiten met een streep.

Border-radius

Met de eigenschap border-radius kan je een element voorzien van afgeronde hoeken, zelfs als geen border is ingesteld. Voorbeeld: border-radius: 10px geeft de hoeken een afronding met een straal van 10px.

Meer mogelijkheden in de naslag

Samenvatting

Selectors

elementselecteert elk voorkomen van dat element

Voorbeeld: a
selecteert alle links

element1 element2selecteert alle elementen2 binnen element1

Voorbeeld: div a
selecteert alle links binnen een division (ook als die links bijvoorbeeld in een alinea binnen een division staan)

element:hoverselecteert een element als het met de muis wordt aangewezen

Voorbeeld: a:hover
selecteert een link als die wordt aangewezen met de muis

element [attribuut=waarde]selecteert een element met het attribuut dat de aangegeven waarde heeft.

Voorbeeld: a[target="_blank"]
selecteert alle links waarvan het attribuut target de waarde "_blank" heeft.

Meer over selectors in de naslag selectors

Border eigenschappen

borderRand om een element

basisvorm: border: lijnbreedte, stijl, kleur

Onderstaande eigenschappen zijn hier niet behandeld. Zie de naslag
border-stylenone, dotted, dashed, solid, double, groove, ridge, inset,, outset,
border-radiusAfronding van de hoeken

voorbeeld: border-radius: 10px;