Inspirerend, verbindend en nieuwsgierig
Een leven lang leren
Bezoek de website
‹Terug naar zoeken

02 - CSS - selectoren

CSS Selectoren
1 / 15
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1-4

In deze les zitten 15 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

CSS Selectoren

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over de verschillende selectoren binnen CSS?

Slide 5 - Woordweb

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 15 - Open vraag

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.