02 - CSS - selectoren

• ICT
• MBO
• Studiejaar 1-4

CSS Selectoren

Welke taal wordt gebruikt voor opmaak van websites?

1. HTML
2. Python
3. CSS
4. JavaScript

Als je een vergelijking moet maken die aangeeft waarin CSS zich verhoud tot HTML, welke is dan de beste?

1. CSS is de motor en HTML is de kleur van de auto
2. CSS is het spel en HTML de controller waarmee je het spel speelt
3. CSS zijn de botten van je lichaam, HTML is je uiterlijk (bijv haren/oogkleur/etc)
4. CSS is als de taartdecoratie en HTML is als de taartbodem en ingrediënten.

Leerdoel

Aan het einde van de les kun je verschillende selectoren binnen CSS benoemen en toepassen in CSS.

Wat weet je al over de verschillende selectoren binnen CSS?

Inleiding

CSS-selectoren zijn patronen die 

worden gebruikt om de elementen 

te selecteren die je wilt opmaken. 

Ze stellen je in staat om specifieke 

HTML-elementen te targeten zodat

je de layout van dit element kan

aanpassen

Element Selector

De element selector selecteert alle elementen van een bepaald type, zoals alle <p> elementen.

In HTML

<h1>Header 1</h1>

In CSS

h1 {

   color: blue;

}

Class selectoren

Class selectoren selecteren meerdere HTML-elementen op basis van het 'class' attribuut, bijvoorbeeld '.classNaam'.

In HTML

In CSS

<h1 class="classNaam">header 1</h1>

.classNaam {

    color: blue;

    font-size: 16px;

}

ID selectoren

ID selectoren selecteren een specifiek HTML-element op basis van het 'id' attribuut, bijvoorbeeld '#idnaam'.

In HTML

In CSS

<h1 id="idnaam">header 1</h1>

#idnaam {

    color: blue;

    font-size: 16px;

}

Descendant Selector

De descendant selector selecteert alle elementen die een bepaald element bevatten, bijvoorbeeld 'div p' selecteert alle <p> elementen binnen een <div> element.

<div class="welcome">

    <section>

        <p>Dit wordt geselecteerd</p>

    </section>

    <p>Dit wordt ook geselecteerd</p>

</div>

.welcome p {

   font-size: 2px;

   color: #f00;

}

https://jsfiddle.net/sd6g23ha/

Child Selector

De child selector selecteert elementen die direct kind zijn van een ander element. Bijvoorbeeld ".welcome > p" selecteert alle <p> elementen die direct kind zijn van een element met class 'welcome'.

https://jsfiddle.net/jeyr6kxz

<div class="welcome">

    <section>

       <p>Dit wordt niet geselecteerd</p>

    </section>

    <p>Dit wordt geselecteerd</p>

</div>

.welcome > p {

   font-size: 2px;

   color: #f00;

}

Attribuut Selector

Een attribute selector in CSS wordt gebruikt om elementen te selecteren op basis van de waarde van een attribuut.

<input type="text" required>

<input type="email">

<input type="password" required>

input[required] {

    border: 1px solid red;

}

https://jsfiddle.net/51w3g67x/

Opdracht

Je krijg zo dadelijk kaartjes waarbij verschillende typen selectoren te zien zijn. Verdeel ze zo dat ze bij de juiste type liggen.

Afsluiting

Je hebt geleerd dat er verschillende selectoren zijn die je kan gebruiken. Je hebt voorbeelden gezien en we hebben er mee geoefend.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.