{"id":399,"date":"2014-06-16T09:56:24","date_gmt":"2014-06-16T08:56:24","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=399"},"modified":"2014-06-16T09:56:24","modified_gmt":"2014-06-16T08:56:24","slug":"css-selectors","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/css-selectors\/","title":{"rendered":"Altres selectors CSS"},"content":{"rendered":"<p>(Material adaptat i tradu\u00eft de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Attribute_selectors\" hreflang=\"en\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Attribute_selectors<\/a>)<\/p>\n<p>Hem vist als materials de l&#8217;assignatura selectors de l&#8217;estil <code>[atribut]<\/code>, que reprenta els elements que tinguin un atribut amb nom <code>atribut<\/code> i <code>[atribut=valor]<\/code>, que representen, naturalment, els elements que tenen l&#8217;atribut <code>atribut<\/code> amb valor exactament <code>valor<\/code>.<\/p>\n<p>Disposem, per\u00f2, d&#8217;altres selectors relacionats a trav\u00e9s de comprovaci\u00f3 de patrons (<i lang=\"en\">pattern matching<\/i>):<\/p>\n<dl>\n<dt><code>[atribut~=valor]<\/code><\/dt>\n<dd>Representa els elements amb un atribut <code>atribut<\/code> que tenen per valor una llista de paraules separades per espais, una de les quals \u00e9s exactament <code>valor<\/code>.<\/dd>\n<dt><code>[atribut|=valor]<\/code><\/dt>\n<dd>Representa els elements amb un atribut <code>atribut<\/code> amb valor exactament <code>valor<\/code> o que comenci per <code>valor<\/code> seguit immediatament d&#8217;un gui\u00f3 <code>-<\/code>.<\/dd>\n<dt><code>[atribut^=valor]<\/code><\/dt>\n<dd>Representa els elements amb un atribut <code>atribut<\/code> amb valor comen\u00e7ant per <code>valor<\/code>.<\/dd>\n<dt><code>[atribut$=valor]<\/code><\/dt>\n<dd>Representa els elements amb un atribut <code>atribut<\/code> i valor acabat en <code>valor<\/code>.<\/dd>\n<dt><code>[atribut*=valor]<\/code><\/dt>\n<dd>Representa els elements amb un atribut <code>atribut<\/code> i valor contenint <code>valor<\/code>.<\/dd>\n<\/dl>\n<p>Aix\u00ed, per exemple,<\/p>\n<pre>\r\n<code>\r\n\/* Posa en negreta tots els span amb atribut \"lang\" *\/\r\nspan[lang] {font-weight:bold;}\r\n \r\n\/* Posa en verd tots els span en qu\u00e8 s'hagi \r\n   especificat idioma portugu\u00e8s *\/\r\nspan[lang=\"pt\"] {color:green;}\r\n\r\n\/* Posa en vermell els span en que s'hagi especificat\r\n   idioma xin\u00e8s, tant simplificat (zh-CN) com\r\n   tradicional (zh-TW) *\/\r\nspan[lang|=\"zh\"] {color: red;}\r\n\r\n\/* D\u00f3na fons daurat a tots els enlla\u00e7os que especifiquin\r\n   un identificador *\/\r\na[href^=\"#\"] {background-color:gold}\r\n\r\n\/* Posa en vermell tots els enlla\u00e7os que acabin en \".cn\" *\/\r\na[href$=\".cn\"] {color: red;}\r\n\r\n\/* D\u00f3na fons gris a tots els enlla\u00e7os que \r\n   continguin la cadena \"example\" *\/\r\na[href*=\"example\"] {background-color: #CCCCCC;}\r\n<\/code>\r\n<\/pre>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>(Material adaptat i tradu\u00eft de https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Attribute_selectors) Hem vist als materials de l&#8217;assignatura selectors de l&#8217;estil [atribut], que reprenta els elements que tinguin un atribut amb nom atribut i [atribut=valor], que representen, naturalment, els elements que tenen l&#8217;atribut atribut amb valor exactament valor. Disposem, per\u00f2, d&#8217;altres selectors relacionats a trav\u00e9s de comprovaci\u00f3 de patrons (pattern matching): &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/css-selectors\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Altres selectors CSS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-399","post","type-post","status-publish","format-standard","hentry","category-css","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":16,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":415,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/399\/revisions\/415"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}