Hoe zit het nou als een CSS-style geen parent heeft?
Een voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#PopupContainer{
position:absolute;
left:0;
top:0;
z-index: 20000;
background-color: white;
border: 1px solid #000;
border-radius: 5px 5px 5px 5px;
width: 300px;
height: auto;
}
position:absolute;
left:0;
top:0;
z-index: 20000;
background-color: white;
border: 1px solid #000;
border-radius: 5px 5px 5px 5px;
width: 300px;
height: auto;
}
Wanneer plaats je zou een class (of ID) zonder parent bovenaan? Want deze popup wordt voornamelijk in #content aangeroepen, maar #content #PopupContainer werkt weer niet.
Hoe zit dit nou eigenlijk?
Code (php)
1
2
3
2
3
#content #PopupContainer {
}
}
of dit
Code (php)
1
2
3
2
3
#PopupContainer {
}
}
moet gebruiken?
Bedoel je hier "div#PopupContainer" en dan is div de parent?
Fabian M op 08/12/2011 12:25:06:
Bedoel je waarneer je dit
of dit
moet gebruiken?
Code (php)
1
2
2
#content #PopupContainer {
}
}
of dit
Code (php)
1
2
2
#PopupContainer {
}
}
moet gebruiken?
Ja, dat bedoel ik.
Bijvoorbeeld:
Code (php)
1
#menu .items {}
Maar #container #bla #cdasdf is zeker fout. Volgens mij controleert google page speed hier op.
- Aar - op 08/12/2011 12:45:46:
Ja, dat bedoel ik.
Fabian M op 08/12/2011 12:25:06:
Bedoel je waarneer je dit
of dit
moet gebruiken?
Code (php)
1
2
2
#content #PopupContainer {
}
}
of dit
Code (php)
1
2
2
#PopupContainer {
}
}
moet gebruiken?
Ja, dat bedoel ik.
Aangezien een ID uniek is en dus slechts 1x op de pagina voorkomt, zou #PopupContainer moeten volstaan.
Erwin H:
div < a (wat volgens mij alleen niet werkt).
Bedoel je hier "div#PopupContainer" en dan is div de parent?
Bedoel je hier "div#PopupContainer" en dan is div de parent?
De < selector gaat er komen in (waarschijnlijk CSS4, maar dan op een andere manier). De > selector bestaat al wel.
Een aantal voorbeelden om wat selectors duidelijk te maken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
CSS: div#box
<div id="box"></div>
CSS: div #box
<div>
<foo id="box"></foo> <!-- Foo kan elk element zijn -->
</div>
Maar ook:
<div>
<header>
<foo id="box"></foo>
</header>
</div>
CSS: div > #box
<div>
<foo id="box"></foo>
</div>
<div id="box"></div>
CSS: div #box
<div>
<foo id="box"></foo> <!-- Foo kan elk element zijn -->
</div>
Maar ook:
<div>
<header>
<foo id="box"></foo>
</header>
</div>
CSS: div > #box
<div>
<foo id="box"></foo>
</div>
Met div #box selecteer je dus niet de child #box van div, maar de descendant #box van div. Het maakt niet uit in welk level het zit, als het maar ergens in een div zit. Een child moet altijd in het eerste level na de parent zitten.
Met div > #box selecteer je alleen de child #box van een div. Deze moet dus op het eerste level van een child zitten.