Virusscanner tips?
CSS selectors die voorgaan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
.menu {
border: 1px solid #d2d2d2;
}
.menu li:not(.no-items) {
width: 50px;
height: 50px;
display: inline-block;
list-style: none;
background-color: #f2f2f2;
}
.no-items {
width: 98%;
display: block;
color: #ff0000;
}
.selected-item {
background-color: #fbfbfb;
}
</style>
<!-- In html -->
<ul class="menu">
<li class="no-items">Geen items aanwezig</li>
<li>Item 1</li>
<li>Item 2</li>
<li class="selected-item">Item 3</li><!-- Met javascript geselecteerd (is op geklikt) -->
<li>Item 4</li>
</ul>
.menu {
border: 1px solid #d2d2d2;
}
.menu li:not(.no-items) {
width: 50px;
height: 50px;
display: inline-block;
list-style: none;
background-color: #f2f2f2;
}
.no-items {
width: 98%;
display: block;
color: #ff0000;
}
.selected-item {
background-color: #fbfbfb;
}
</style>
<!-- In html -->
<ul class="menu">
<li class="no-items">Geen items aanwezig</li>
<li>Item 1</li>
<li>Item 2</li>
<li class="selected-item">Item 3</li><!-- Met javascript geselecteerd (is op geklikt) -->
<li>Item 4</li>
</ul>
In sommige browsers zal het li element met class selected-item gewoon een andere achtergrondkleur krijgen, maar ik kom steeds vaker tegen in browsers zoals Google Chrome, dat de .menu li selector voor de .selected-item selector gaat. Ik heb ook al geprobeerd om de :not selector te gebruiken. Het werkt nog steeds niet echt. Ik probeer eigenlijk om niet elke li een eigen klasnaam te geven, misschien wel raar. Ik wil het heel graag met css oplossen. Een lijst kan wel 200 items bevatten, dus zal de html output ook heel groot worden als er steeds class attributen in komen, terwijl css zo'n handige selectors heeft, waarvan het juist de bedoeling is dat je niet alles hoeft te benoemen. (en dat de html simpel en compact is)
Wat ik dus wil:
- ul lijst
-- li elementen zonder klasnaam: afmetingen 50x50 px, achtergrond: #f2f2f2, display: inline-block
-- li met classnaam no-items: display: block, afmetingen: 30px hoog en 98% breed, geen achtergrond kleur, tekstkleur: #d2d2d2;
-- li met classnaam selected-item: eigenlijk hetzelfde als de li zonder klassenaam, maar dan met achtergrond: #fbfbfb;
Hoe krijg ik dit voor elkaar?
.menu li geldt alleen voor de li elementen in .menu, terwijl .no-items voor alle elementen in het document geldt met de class .no-items.
De oplossing: .no-items ook preciezer maken, bijv. .menu .no-items.