{"id":189,"date":"2023-06-02T17:38:42","date_gmt":"2023-06-02T15:38:42","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=189"},"modified":"2023-06-02T18:45:26","modified_gmt":"2023-06-02T16:45:26","slug":"selectors-avancat","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/selectors-avancat\/","title":{"rendered":"Selectors avan\u00e7at"},"content":{"rendered":"\n

Selectors d’atribut<\/h2>\n\n\n\n

Els selectors d’atribut permeten indicar al navegador elements que tenen un atribut i, opcionalment, amb un valor d’atribut (que pot ser exacte o parcial)<\/p>\n\n\n\n

\/* element <a> amb atribut title (amb qualsevol valor) *\/\na[title] {\n  color: purple;\n}\n\n\/* <a> amb l'href apuntant a \"https:\/\/exemple.org\" *\/\na[href=\"https:\/\/exemple.org\"]\n{\n  color: green;\n}\n\n\/* <a> amb href que cont\u00e9<\/strong> \"exemple\" *\/\na[href*=\"exemple\"] {\n  font-size: 2em;\n}\n\n\/* <a> amb href que termina en<\/strong> \".org\" *\/\na[href$=\".org\"] {\n  font-style: italic;\n}\n\/* <a> amb href que comen\u00e7a per<\/strong> \"http:\/\/\" *\/\na[href^=\"http:\/\/\"] {\n  font-style: italic;\n}\n\n\/* <a> que t\u00e9 assignada un nom de classe \"logo\" (pot tenir altres classes) *\/\na[class~=\"logo\"] {\n  padding: 2px;\n}\n\n\/* <a> que t\u00e9 assignada un nom de classe \"logo\" o una classe que comen\u00e7a per \"logo-\" *\/\na[class|=\"logo\"] {\n  padding: 2px;\n}\n<\/code><\/pre>\n\n\n\n
Aquest tipus de selectors es fan servir molt per poder estilar de forma diferent enlla\u00e7os segons si porten a un email ([href^=mailto]), s’obren en finestra nova ([target=_blank]), enllacen un n\u00famero de tel\u00e8fon ([href^=tel]),.. sense haver de donar-los una classe.<\/p>\n\n\n\n
Al CSS del reset que hem fet servir, hem vist aquesta regla:<\/p>\n\n\n\n
ul[class], 
ol[class]{
      list-style:none;
}<\/code><\/pre>\n\n\n\n
Aquesta regla indica que qualsevol llista del tipus ordered<\/em> (ol) o unordered<\/em> (ul) es mostrar\u00e0 sense el format de llista, per\u00f2 nom\u00e9s si t\u00e9 assignada una classe (sigui quina sigui).<\/p>\n\n\n\n
Per poder indicar que volem que qualsevol llista (ul o ol) es mostri sense estil (list-style:none), hem modificat la regla de la seg\u00fcent manera:<\/p>\n\n\n\n
ul,
ol{
list-style:none;
}<\/code><\/pre>\n\n\n\n
Selector de fills<\/h2>\n\n\n\n
Fins ara, hem fet servir selectors contextuals<\/p>\n\n\n\n
article h2{
}<\/code><\/pre>\n\n\n\n
article h2<\/em>, estilar\u00e0 tots els h2<\/em> que hi ha dins d’un article<\/p>\n\n\n\n
article > h2{
}<\/code><\/pre>\n\n\n\n
En canvi article > h2<\/em> nom\u00e9s estilar\u00e0 els h2<\/em> que siguin fills directes de l’article<\/em>. Si a dins de l’article<\/em> hi ha un footer<\/em> i aquest footer<\/em> t\u00e9 un h2<\/em>, aquest h2<\/em> no s’estilar\u00e0.<\/p>\n\n\n\n
Selector de germans<\/h2>\n\n\n\n
Podem fer servir els s\u00edmbols ~ i  + per assenyalar un element que comparteix pare amb un altre<\/p>\n\n\n\n
h2 ~ p{
}<\/code><\/pre>\n\n\n\n
h2 ~ p<\/em><\/strong> indica al navegador que busqui qualsevol par\u00e0grafs que comparteixi pare amb un h2<\/em><\/p>\n\n\n\n
h2 + p{
}<\/code><\/pre>\n\n\n\n
h2 + p<\/em><\/strong> indica qualsevol par\u00e0grafs que apareix inmediatament despr\u00e9s d’un h2<\/em><\/p>\n\n\n\n
h2 + p + p{
}<\/code><\/pre>\n\n\n\n
h2 + p + p<\/em><\/strong> localitza aquells par\u00e0grafs que segueixen a un altre par\u00e0grafs que, al seu torn, segueix a un h2<\/em><\/p>\n\n\n\n
Al Reset que hem fet servir, hem trobat aquesta regla:<\/p>\n\n\n\n
article > * + *{
margin-top: 1em;
}<\/code><\/pre>\n\n\n\n
Aquesta regla diu al navegador que busqui qualsevol element que segueixi a un altre que, al seu torn, sigui fill directe d’un article. Aix\u00f2 permetr\u00e0 aplicar un marge superior a qualsevol fill directe d’un article, sempre i quan no sigui el primer fill directe (en aquest cas no tindr\u00e0 cap altre element al davant).<\/p>\n","protected":false},"excerpt":{"rendered":"
Selectors d’atribut Els selectors d’atribut permeten indicar al navegador elements que tenen un atribut i, opcionalment, amb un valor d’atribut (que pot ser exacte o parcial) Aquest tipus de selectors es fan servir molt per poder estilar de forma diferent enlla\u00e7os segons si porten a un email ([href^=mailto]), s’obren en finestra nova ([target=_blank]), enllacen un… Continueu llegint Selectors avan\u00e7at<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":9,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/189\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}