{"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\/css\/css-selectors\/","title":{"rendered":"Otros selectores CSS"},"content":{"rendered":"<p>(Material adaptado y traducido 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>Hemos visto en los materiales de la asignatura selectores del estilo <code>[atributo]<\/code>, que reprenta los elementos con un atributo de nombre <code>atributo<\/code> y <code>[atributo=valor]<\/code>, que representan, naturalmente, los elementos con atributo <code>atributo<\/code> con valor exactamente <code>valor<\/code>.<\/p>\n<p>Pero disponemos de otros selectores relacionados a trav\u00e9s de correspondencia de patrones (<i lang=\"en\">pattern matching<\/i>):<\/p>\n<dl>\n<dt><code>[atributo~=valor]<\/code><\/dt>\n<dd>Representa los elementos con un atributo <code>atributo<\/code> cuyo valor sea una lista de palabras separadas por espacios y uno de los cuales sea exactamente <code>valor<\/code>.<\/dd>\n<dt><code>[atributo|=valor]<\/code><\/dt>\n<dd>Representa los elementos con un atributo <code>atributo<\/code> y valor exactamente <code>valor<\/code> o que comience por <code>valor<\/code> seguido inmediatamente de un gui\u00f3n <code>-<\/code> (U+002D).<\/dd>\n<dt><code>[atributo^=valor]<\/code><\/dt>\n<dd>Representa los elementos con un atributo <code>atributo<\/code> y valor comenzando por <code>valor<\/code>.<\/dd>\n<dt><code>[atributo$=valor]<\/code><\/dt>\n<dd>Representa los elementos con un atributo <code>atributo<\/code> y valor acabando en <code>valor<\/code>.<\/dd>\n<dt><code>[atributo*=valor]<\/code><\/dt>\n<dd>Representa los elementos con un atributo <code>atributo<\/code> y valor conteniendo <code>valor<\/code>.<\/dd>\n<\/dl>\n<p>As\u00ed, por ejemplo:<\/p>\n<pre>\r\n<code>\r\n\/* Pone en negrita todos los spans con atributo \"lang\" *\/\r\nspan[lang] {font-weight:bold;}\r\n \r\n\/* Pone en verde todos los spans en que se haya \r\n   especificado idioma portugu\u00e9s *\/\r\nspan[lang=\"pt\"] {color:green;}\r\n\r\n\/* Pone en rojo los spans en que se haya especificado\r\n   idioma chino, tanto simplificado (zh-CN) como\r\n   tradicional (zh-TW) *\/\r\nspan[lang|=\"zh\"] {color: red;}\r\n\r\n\/* Da fondo dorado a todos los enlaces que especifiquen\r\n   un identificador *\/\r\na[href^=\"#\"] {background-color:gold}\r\n\r\n\/* Pone en rojo todos los enlaces que acaben en \".cn\" *\/\r\na[href$=\".cn\"] {color: red;}\r\n\r\n\/* Da fondo gris a todos los enlaces que \r\n   contengan 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 adaptado y traducido de https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Attribute_selectors) Hemos visto en los materiales de la asignatura selectores del estilo [atributo], que reprenta los elementos con un atributo de nombre atributo y [atributo=valor], que representan, naturalmente, los elementos con atributo atributo con valor exactamente valor. Pero disponemos de otros selectores relacionados a trav\u00e9s de correspondencia de patrones (pattern &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/css-selectors\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abOtros selectores CSS\u00bb<\/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\/wp-json\/wp\/v2\/posts\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":16,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":415,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/399\/revisions\/415"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}