Selectors en CSS
Els selectors en CSS són condicions que ben aplicades donen al element, classe, o identificador l’aparença que nosaltres volguem sense un excessiu nombre de clases. Aquests selectors van del més simple ex. body {color:#333} fins a regles complexes com ex. #contingut div[class="cos"] > p:first-child:first-letter{font-size:20px}.
Per a fer regles complexes és necesari l’ús de combinatoris com l’espai en blanc, el signe +, i > i/o també l’ús de pseudo-elements com first-child, first-letter…
Els exemples contenen elements, ID’s i classes, que és el que permeten els selectors. Aquests exemples són iguals o similars als que conté paparra.net + evolution.css. Per una informació més completa sobre cada selector visiteu la traducció al castellà de les especificacions del W3C.
Selector de qualsevol element.
*
CSS:
blockquote * {color:red}
Afecta a totes les etiquetes que estiguin dins d’un blockquote
Selector d’un element en concret
X
CSS:
h2 {color:red}
HTML:
<h1> paparra.net </h1>
<p> hola món </p>
<h2> secció musical </h2>
Selector de l’element Y quan és descendent de X
X Y
Seleccionar els h3 que estiguin dins de la ID contingut.
CSS:
#contingut h3{color:red}
HTML:<div id="menu"> <div class="reduit"> <h3> seccions </h3> </div> </div> <div id="contingut"> <div class="post"> <h3> titol </h3> </div> </div>
Selector de l’element Y quan és fill de X
X > Y
Seleccionar els h3 que estiguin dins de la ID contingut.
CSS:
#contingut > h3
HTML:<div id="menu"> <div class="reduit"> <h3> seccions </h3> </div> </div> <div id="contingut"> <div class="post"> <h3> titol </h3> </div> </div> <div id="contingut"> <h3> titol </h3> </div>
Selector d’X quan és el primer fill de l’element pare
X:first-child
CSS:
li:first-child{color:red}
HTML:<ul> <li> dia 1 </li> <li>dia 2</li> <li>dia 3</li> <li>dia 4</li> </ul>
X:link
X:visited
Afecta als links abans i després de ser pitjats.
Selector d’X quan esta actiu, a sobre i en ús, respectivament.
X:active
X:hover
X:focus
CSS:
fieldset:hover, fieldset:focus {background:red}
Selector de l’element Y adjacent a X
X + Y
CSS:
p + p + p{color:red}
HTML:<div> <p> paràgraf 1 </p> <p> paràgraf 2 </p> <p> paràgraf 3 </p> <p> paràgraf 4 </p> <p> paràgraf 5 </p> </div>
Selectors dels elements X que tenen la propietat J
X[J]
CSS:
a[hreflang]{color:red}
HTML:<a href="http..."> link </a> <a href="http..." hreflang="es-ES"> link </a>
Selector d’aquells elements X que tenen la propietat J amb el valor I
X[J="I"]
CSS:
Input[value="Enviar"]{color:red}
HTML:<textarea name="cos" cols="30" rows="10"></textarea> <input name="Submit" type="submit" value="Enviar" class="boto" /> <input name="guardar" type="checkbox" value="1" checked="checked />
Selector d’aquells elements X que tenen la propietat J i contenen la paraula I en el valor i separat per espais.
X[J~="I"]
CSS:
table[summary~="publicats"]{color:red}
HTML:
<table cellpadding=”0″ cellspacing=”0″ summary=”Recull de tots els posts publicats desde la creació de paparra.net”>
Selector d’aquells elements X que tenen la propietat J amb un valor que comença per K
X[J|="K"]
CSS:
a:hover[hreflang|="es"]{background:red}
HTML:
<a href=”http…” hreflang=”es-ES”> link </a>