Selectors combinats
Publicat el 20/03/2004
Les combinacions de selectors permeten identificar un element en funció de la seva posició respecte d'un altre.
Les alternatives són:
Selector de descendents [A B]
Els selectors de descendents permeten especificar un element que està contingut dins d'un altre. És a dir, a partir d'un element pare podem seleccionar tots els elements descendents del mateix tipus.
h1 {
color: red;
}
p {
color: black;
}
em {
color: red;
}
Amb aquestes regles el text dels títols seria vermell, el dels paràgrafs negre i el text emfatitzat vermell.
D'aquesta manera el text emfatitzat dels paràgrafs quedaria resaltat però el dels títols no.
h1 em {
color: blue;
}
Afegint aquesta regla es conseguiria resaltar en blau els textos emfatitzats dels títols però quedarien en vermell els d'un paràgraf.
Selectors de fills [A>B]
Els selectors de fills identifiquen un element que sigui fill d'un altre.
div>p {
color: blue;
}
div > p {
color: blue;
}
Amb aquesta regla es seleccionen tots els paràgrafs fills d'un element <div>.
Les dues regles anteriors són iguals. Els espais són opcionals.
Selectors de germans adjacents [A+B]
Els selectors de germans adjacents tenen una sintàxi similar a les dues anteriors, utilitzen com a combinador el signe més (+).
Per germans adjacents s'enten que són aquells elements que comparteixen el mateix pare i que estan un a continuació de l'altre a l'estructura del document.
h1 + p {
text-indent: 0;
}
h1 + h2 {
margin-top: -0.5em;
}
Amb la primera regla es seleccionen els paràgrafs (<p>) que segueixin inmediatament un títol de primer nivell (<h1>).
Amb la segona regla es seleccionen els títols de segon nivell (<h2>) que segueixin inmediatament un títol de primer nivell (<h1>).
Nota: els selectors de fills i de germans adjacents NO funcionen en Internet Explorer 6.
Comentaris