Pseudo Klassen
- Een pseudo-classe wordt gebruikt om een speciale toestand van een element te definiëren.
- Bv. andere kleur voor hyperlinks wanneer je er met de muis over gaat of er op klikt
selector:pseudo-class {
property:value;
}
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}👩💻 Hands-on Demo: Pseudo Klassen
- Maak een nieuwe projectmap aan genaamd
eten-planningen open deze in Visual Studio Code. - Maak de tabel in het voorbeeld na, en zorg ook dat als je over een rij hover’t dat deze een grijze achtergrond krijgt.
Oplossingen
🕵️♂️ Klik hier om de oplossingen te tonen
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Eten Planning</title>
</head>
<body>
<h1>Eten Planning</h1>
<p>Om pseudo klassen te leren kennen</p>
<table>
<tr>
<th>Weekdag</th>
<th>Middageten</th>
<th>Avondeten</th>
</tr>
<tr>
<td>Maandag</td>
<td>Brood</td>
<td>Spaghetti</td>
</tr>
<tr>
<td>Dinsdag</td>
<td>Brood</td>
<td>Frietjes</td>
</tr>
<tr>
<td>Woensdag</td>
<td>Brood</td>
<td>Boontjes</td>
</tr>
<tr>
<td>Donderdag</td>
<td>Brood</td>
<td>Pizza</td>
</tr>
<tr>
<td>Vrijdag</td>
<td>Brood</td>
<td>Spinazie</td>
</tr>
<tr>
<td>Zaterdag</td>
<td>Balletjes in tomatensaus</td>
<td>Brood</td>
</tr>
<tr>
<td>Zondag</td>
<td>Barbecue</td>
<td>Brood</td>
</tr>
</table>
</body>
</html>
th {
background-color: #ffe4b5;
font-weight: bold;
}
tr:nth-child(even){
color: white;
background-color: black;
}
tr:hover {
background-color: gray;
}