Websites met stijl

20. Selectors en borders

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 elk img element van de class extra

voorbeeld 6b .naarboven { } selecteert alle elementen (het geeft niet welke) van de class naarboven, bijvoorbeeld 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; }

Toon antwoord

Van alle elementen article binnen een div element wordt de tekst blauw.
Als 2 elementen gescheiden zijn door een spatie gaat het om het tweede element dat binnen het eerste element staat.

stijlregel 2 div, article { color: blue; }

Toon antwoord

Van alle elementen div én van alle elementen article wordt de tekst blauw.
Als 2 elementen gescheiden zijn door een komma gaat het om het eerste element én het tweede element.

stijlregel 3 div .article { color: blue; }

Toon antwoord

Van alle elementen van de class article binnen een div element wordt de tekst blauw.
Er staat een punt voor article. Het gaat dus niet om het element article maar om de class article.
En er staat een spatie tussen div en .article, het gaat dus om .article binnen div.)

stijlregel 4 div.article { color: blue; }

Toon antwoord

Van alle div.article elementen (dat zijn alle div elementen van de class article) wordt de tekst blauw.

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

Toon antwoord

Van alle div elementen en van alle elementen van de class article wordt de tekst blauw.
div en .artivle zijn gescheiden door een komma. Het gaat dus om div én om .article. Er staat een punt voor article, dus het gaat om de class article

Duizelt het je? Deze vragen waren wel héél pittig!
Had je ze (bijna) allemaal goed? Super!

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 ;

• Randdikte is de dikte van de rand (meestal in pixels)
• Randstijl kan o.a. zijn: solid (lijn, double (dubbele lijn), dashed (streepjes).

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