![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-54.png\")
<\/p>\nUn selector \u00e9s el mitj\u00e0 per fer una refer\u00e8ncia<\/b> a un grup d’un o m\u00e9s elements HTML, per tal d’aplicar a aquest un conjunt de declaracions CSS.<\/p>\n
Hi ha una estructura amb la que s\u2019ha de complir per a usar un selector i est\u00e0 composta pel selector seguit del conjunt de declaracions tancades per claus “{}”. El seg\u00fcent exemple, en el qual espais i trenquis de l\u00ednia han estat agregats per millorar la lectura, reflecteix aquesta estructura.<\/p>\n
<\/p>\n
El selector universal s’indica mitjan\u00e7ant un asterisc (*). Malgrat la seva senzillesa, no s’utilitza habitualment<\/b>, ja que \u00e9s dif\u00edcil que un mateix estil es pugui aplicar a tots els elements d’una p\u00e0gina.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-55.png\")
<\/p>\n
Selecciona tots els elements de la p\u00e0gina que l’etiqueta HTML coincideix amb el valor del selector. Per exemple, tots els par\u00e0grafs <p>, tots el \u00edtems d\u2019una llista <li>, tots els enlla\u00e7os <a>, etc.<\/p>\n
HTML:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-56.png\")
<\/p>\n
CSS:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-57.png\")
<\/p>\n
RESULTAT:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-58.png\")
<\/p>\n
El selector de ID es correspon amb tots els elements que tenen el valor especificat en el seu atribut id. Com, per definici\u00f3, els valors de id han de ser \u00fanics,<\/b> aquest selector pot afectar nom\u00e9s a un element en el document<\/b>. En la seva declaraci\u00f3, l’ID especificat ha d’estar precedit pel signe numeral (“#”).<\/p>\n
HTML:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-59.png\")
<\/p>\n
CSS:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-60.png\")
<\/p>\n
RESULTAT:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-61.png\")
<\/p>\n
Una classe \u00e9s un concepte introdu\u00eft per CSS amb el prop\u00f2sit d’agrupar declaracions<\/b> i aplicar-les a un conjunt personalitzat d’elements, independentment del seu tipus o naturalesa. Des d’un altre punt de vista, una classe \u00e9s una o m\u00e9s declaracions CSS, agrupades sota un nom que els elements poden utilitzar per accedir a les seves definicions i ser afectats per elles.<\/p>\n
Dit aix\u00f2, un selector de classe aplica un conjunt de delcaracions a tots els elements que tenen el nom de classe especificat en el seu atribut class<\/b>. En la seva construcci\u00f3, un punt (“.”) ha de precedir al nom de la classe.<\/p>\n
Exemple: un conjunt de declaracions per la classe anomenada \u201cimportant\u201d.<\/i><\/p>\n
HTML:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-62.png\")
<\/p>\n
CSS:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-63.png\")
<\/p>\n
RESULTAT:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-64.png\")
<\/p>\n
CSS permet realitzar combinacions amb els quatre selectors b\u00e0sics<\/b> descrits a dalt, fent refer\u00e8ncia a les relacions entre pares, fills, germans, descendents i m\u00e9s<\/b>. Amb algunes d’aquestes eines podries, per exemple, aplicar declaracions a tots els par\u00e0grafs que s\u00f3n fills directes del cos (body) (body > p).<\/i> A m\u00e9s, proveeix altres selectors basats en la composici\u00f3 dels atributs o els estats<\/b> que un element presenta, permetent als autors aplicar declaracions a, per exemple, tots els elements input que s\u00f3n de tipus “r\u00e0dio”<\/i> (atribut type) (input[type=\u201dradio\u201d]).<\/i><\/p>\nSelectors descendents<\/h2>\n
Selecciona els elements que es troben dins d’altres elements<\/b>. Un element \u00e9s descendent d’un altre quan es troba entre les etiquetes d’obertura i de tancament de l’altre element.<\/p>\n
El selector del seg\u00fcent exemple selecciona tots els elements <em> de la p\u00e0gina que es trobin dins d’un element <p>:<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-65.png\")
<\/p>\n
Si el codi HTML \u00e9s el seg\u00fcent:<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-66.png\")
<\/p>\n
El selector p em selecciona tant el text \u201cEl Bergued\u00e0\u201d com \u201cBerga\u201d per\u00f2 no \u201cCatalunya\u201d. El motiu \u00e9s que al selector descendent, un element no ha de ser descendent directe de l’altre. L’\u00fanica condici\u00f3 \u00e9s que un element ha d’estar dins d’un altre element<\/b>, sense importar el nivell de profunditat en qu\u00e8 es trobi.<\/p>\n
A la resta d’elements <em> de la p\u00e0gina que no estan dins d’un element <p>, no se’ls aplica la regla CSS anterior.<\/p>\n
Els selectors descendents permeten augmentar la precisi\u00f3<\/b> del selector de tipus o etiqueta. Aix\u00ed, utilitzant el selector descendent \u00e9s possible aplicar diferents estils als elements del mateix tipus. El seg\u00fcent exemple amplia l’anterior i mostra de color blau tot el text dels <em> continguts dins d’un <h1>:<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-67.png\")
<\/p>\n
Amb les regles anteriors:<\/p>\n
La sintaxis formal del selector descendent \u00e9s: \u201cselector1 selector2 selector3 …\u201d<\/p>\n
Els selectors descendents sempre estan formats per dos o m\u00e9s selectors separats entre si per espais en blanc. L’\u00faltim selector indica l’element sobre el qual s’apliquen els estils<\/b> i tots els selectors anteriors indiquen el lloc en qu\u00e8 s’ha de trobar aquest element.<\/p>\n
En el seg\u00fcent exemple, el selector descendent es compon de quatre selectors:<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-68.png\")
<\/p>\n
Els estils de la regla anterior s’apliquen als elements de tipus <em> que es troben dins d’elements de tipus <b>, que alhora es troben dins d’elements de tipus <a> que es trobin dins d’elements de tipus <p>.<\/p>\n
ATENCI\u00d3!<\/b><\/span> No s’ha de confondre el selector descendent amb la combinaci\u00f3 de selectors:<\/p>\n Es pot restringir l’abast del selector descendent combinant-ho amb el selector universal. El seg\u00fcent exemple, mostra els dos enlla\u00e7os de color vermell:<\/p>\n En aquest exemple, nom\u00e9s el segon enlla\u00e7 es mostrar\u00e0 de color vermell:<\/p>\n La ra\u00f3 \u00e9s que el selector p * a s’interpreta com tots els elements de tipus <a> que es trobin dins de qualsevol element que, alhora, es trobi dins d’un element de tipus <p>. Com que el primer element <a> es troba directament sota un element <p>, no es compleix la condici\u00f3 del selector p * a.<\/p>\n","protected":false},"excerpt":{"rendered":" Selectors Un selector \u00e9s el mitj\u00e0 per fer una refer\u00e8ncia a un grup d’un o m\u00e9s elements HTML, per tal d’aplicar a aquest un conjunt de declaracions CSS. Hi ha una estructura amb la que s\u2019ha de complir per a usar un selector i est\u00e0 composta pel selector seguit del conjunt de declaracions tancades per … <\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-69.png\")
<\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-70.png\")
<\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-71.png\")
<\/p>\n