Inspirerend, verbindend en nieuwsgierig
Een leven lang leren

02 - CSS - selectoren

CSS Selectoren
1 / 15
next
Slide 1: Slide
ICTMBOStudiejaar 1-4

This lesson contains 15 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

CSS Selectoren

Slide 1 - Slide

This item has no instructions

Welke taal wordt gebruikt voor opmaak van websites?
A
HTML
B
Python
C
CSS
D
JavaScript

Slide 2 - Quiz

This item has no instructions

Als je een vergelijking moet maken die aangeeft waarin CSS zich verhoud tot HTML, welke is dan de beste?
A
CSS is de motor en HTML is de kleur van de auto
B
CSS is het spel en HTML de controller waarmee je het spel speelt
C
CSS zijn de botten van je lichaam, HTML is je uiterlijk (bijv haren/oogkleur/etc)
D
CSS is als de taartdecoratie en HTML is als de taartbodem en ingrediënten.

Slide 3 - Quiz

This item has no instructions

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

Slide 4 - Slide

This item has no instructions

Wat weet je al over de verschillende selectoren binnen CSS?

Slide 5 - Mind map

This item has no instructions

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

Slide 6 - Slide

This item has no instructions

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;
}

Slide 7 - Slide

This item has no instructions

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;
}

Slide 8 - Slide

This item has no instructions

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;
}

Slide 9 - Slide

This item has no instructions

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/

Slide 10 - Slide

This item has no instructions

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;
}

Slide 11 - Slide

This item has no instructions

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/

Slide 12 - Slide

This item has no instructions

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

Slide 13 - Slide

This item has no instructions

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

Slide 14 - Slide

This item has no instructions

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

Slide 15 - Open question

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.