Hoe zit het nou als een CSS-style geen parent heeft?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- Ariën  -
Beheerder

- Ariën -

08/12/2011 12:17:48
Quote Anchor link
Ik vraag me af, soms zie ik in een stylesheet dat een CSS-class geen parent heeft.

Een voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
    }  


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?
 
PHP hulp

PHP hulp

20/05/2024 15:11:51
 
Fabian M

Fabian M

08/12/2011 12:25:06
Quote Anchor link
Bedoel je waarneer je dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
#content #PopupContainer {

}


of dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
#PopupContainer {

}


moet gebruiken?
 
Erwin H

Erwin H

08/12/2011 12:26:16
Quote Anchor link
Wat bedoel je met parent. In principe zou een parent selector zoiets als dit moeten zijn: div < a (wat volgens mij alleen niet werkt).
Bedoel je hier "div#PopupContainer" en dan is div de parent?
 
- Ariën  -
Beheerder

- Ariën -

08/12/2011 12:45:46
Quote Anchor link
Fabian M op 08/12/2011 12:25:06:
Bedoel je waarneer je dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
#content #PopupContainer {
}


of dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
#PopupContainer {
}

moet gebruiken?

Ja, dat bedoel ik.
 
Niels K

Niels K

08/12/2011 12:48:39
Quote Anchor link
Meestal gebruik ik het per onderdeel. Ook als het classes zijn.

Bijvoorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
#menu .items {}


Maar #container #bla #cdasdf is zeker fout. Volgens mij controleert google page speed hier op.
 
Ozzie PHP

Ozzie PHP

08/12/2011 13:20:48
Quote Anchor link
- Aar - op 08/12/2011 12:45:46:
Fabian M op 08/12/2011 12:25:06:
Bedoel je waarneer je dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
#content #PopupContainer {
}


of dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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.
 
Wouter J

Wouter J

08/12/2011 13:38:55
Quote Anchor link
Wat ozzie zegt is inderdaad juist. Bij een class of bij een tag selector gebruikt ik wel altijd parent selector (tenzij het het eerste element van de body is).

Erwin H:
div < a (wat volgens mij alleen niet werkt).
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.