{"id":5829,"date":"2021-08-06T13:00:00","date_gmt":"2021-08-06T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=5829"},"modified":"2023-10-30T11:02:35","modified_gmt":"2023-10-30T10:02:35","slug":"selectores-css-avanzados","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/selectores-css-avanzados\/","title":{"rendered":"Selectores CSS avanzados"},"content":{"rendered":"\n

A la hora de crear un sitio web o trabajar sobre uno ya existente, es muy habitual tener que emplear selectores CSS avanzados<\/strong> para apuntar a elementos HTML muy concretos. Es por ello que en este art\u00edculo te ense\u00f1o a emplear selectores CSS complejos, que te ayudar\u00e1n a implementar reglas de estilo totalmente adaptadas a tus necesidades. <\/p>\n\n\n\n

Esta entrada es una continuaci\u00f3n del art\u00edculo Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen<\/a>, donde te explico los conceptos b\u00e1sicos sobre los selectores. Si todav\u00eda no tienes muy claro qu\u00e9 son estos elementos y cu\u00e1les son los selectores elementales, te recomiendo leerlo antes de seguir con este art\u00edculo. <\/p>\n\n\n\n

Si ya tienes esos conocimientos, empecemos. <\/p>\n\n\n\n

Selector de hijos<\/h2>\n\n\n\n
\n
\n

Como bien sabr\u00e1s, las etiquetas HTML tienen una estructura jer\u00e1rquica<\/strong>, donde unos elementos se anidan dentro de otros. Es por ello que a los elementos HTML que se encuentran dentro de otro se los denomina \u00abhijos\u00bb de dicho elemento, al cual se le llama elemento \u00abpadre\u00bb. <\/p>\n\n\n\n

Al trabajar con hojas de estilo CSS, en muchas ocasiones te interesar\u00e1 crear reglas que apunten a los hijos de un determinado elemento<\/strong>. Existen diferentes maneras de llevar a cabo esta acci\u00f3n, ve\u00e1moslo con un ejemplo. <\/p>\n<\/div>\n\n\n\n

\n
\"Selector<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Imaginemos que tenemos un conjuntos de elementos div a los que hemos asignado la clase \u00abmiTexto\u00bb, los cuales contienen siempre un p\u00e1rrafo al que queremos dar estilo. La forma m\u00e1s sencilla de aplicar un determinado estilo a todos los p\u00e1rrafos que sean hijos de los div mencionados es la siguiente:<\/p>\n\n\n\n

\n
\n
<!--C\u00f3digo HTML-->\n<\/span><\/div><div class=\"miTexto\">\r\n       <p>Mi p\u00e1rrafo<\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <p>Mi p\u00e1rrafo<\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <p>Mi p\u00e1rrafo<\/p>\r\n<\/div><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\/\/C\u00f3digo CSS\n    .miTexto p {\n        font-size:1rem;\n    }<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
Es decir, para crear un selector de hijos \u00fanicamente tienes que poner los elementos HTML a los que quieres apuntar en orden de padres a hijos<\/strong>. En el ejemplo anterior hemos definido \u00fanicamente dos elementos HTML en el selector, aquellos que tienen la clase \u00abmiTexto\u00bb y las etiquetas de p\u00e1rrafo. Sin embargo, podemos crear selectores m\u00e1s complejos a\u00f1adiendo elementos m\u00e1s HTML.<\/p>\n\n\n\n
Por ejemplo, imagina que en tu documento HTML hay etiquetas de enlace dentro de los div (hermanos de las etiquetas <p>) y dentro de los p\u00e1rrafos (hijos de las etiquetas <p>). Puede que necesites dar estilo a los enlaces que se encuentran dentro de los p\u00e1rrafos que a su vez se encuentran dentro de los div con clase \u00abmiTexto\u00bb. Para ello, tendr\u00e1s que crear un selector que contenga los elementos padres e hijos que sean necesarios: <\/p>\n\n\n\n
\n
\n
<!--C\u00f3digo HTML-->\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\/\/C\u00f3digo CSS\n    .miTexto p a {\n        color:red;\n    }<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"CSS3<\/figure>\n<\/div>\n\n\n\n
\n
De esta manera, estar\u00e1s apuntando \u00fanicamente a los enlaces que se encuentren dentro de los p\u00e1rrafos (hijos), no a los que se encuentran a la misma altura que \u00e9stos (hermanos). <\/p>\n\n\n\n
Por \u00faltimo, conviene que sepas que existe un operador que permite definir selectores de hijo todav\u00eda m\u00e1s espec\u00edficos, es el s\u00edmbolo ><\/strong>. Este operador se pone entre el elemento padre y el elemento hijo, indicando que la propiedad CSS \u00fanicamente se aplicar\u00e1 sobre los hijos directos del padre<\/strong>. <\/p>\n<\/div>\n<\/div>\n\n\n\n
Siguiendo con el ejemplo anterior, los enlaces con texto \u00abEnlace 1\u00bb ser\u00eda hijos directos de los div con clase \u00abmiTexto\u00bb, pero los enlaces con texto \u00abEnlace 2\u00bb no lo ser\u00edan, ya que su padre directo es el p\u00e1rrafo. Imagina que, al contrario que en el ejemplo anterior, quieres dar estilo \u00fanicamente a los enlaces que tienen como texto \u00abEnlace 1\u00bb. En ese caso, el c\u00f3digo necesario es el siguiente: <\/p>\n\n\n\n
\n
\n
<!--C\u00f3digo HTML-->\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\/\/C\u00f3digo CSS\n    .miTexto > a {\n        color:green;\n    }<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
Este tipo de selectores pueden parecer confusos al principio, pero te recomiendo utilizar los c\u00f3digos anteriores para experimentar con este tipo de selectores<\/strong>. \u00a1Con un poco de pr\u00e1ctica los tendr\u00e1s dominados!<\/p>\n\n\n\n
Selectores CSS avanzados: selector de hermanos<\/h2>\n\n\n\n
Estos selectores se utilizan cuando queremos apuntar a elementos que se encuentran al mismo nivel<\/strong>, es decir, aquellos que tienen el mismo padre directo. Sin embargo, en este caso se aplican \u00fanicamente a los elementos hermanos que se encuentren inmediatamente despu\u00e9s<\/strong> unos de otros, sin otro tipo de elementos HTML de por medio. <\/p>\n\n\n\n
Siguiendo con el ejemplo anterior, imaginemos que a\u00f1adimos un encabezado h2 \u00fanicamente a uno de nuestros elementos <div>.  Para darle estilo \u00fanicamente a los enlaces adyacentes (hermanos) a los encabezados h2, se puede emplear el siguiente c\u00f3digo: <\/p>\n\n\n\n
\n
\n
<!--C\u00f3digo HTML-->\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <h2>Mi encabezado<\/h2>\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div>\r\n<div class=\"miTexto\">\r\n       <a href=\"#\">Enlace 1<\/a>\r\n       <p>Mi p\u00e1rrafo <a href=\"#\">Enlace 2<\/a><\/p>\r\n<\/div><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\/\/C\u00f3digo CSS\n    h2 + a {\n        color:gray;\n    }<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
Selectores de atributos<\/h2>\n\n\n\n
Para finalizar con los selectores CSS avanzados, te presento los selectores de atributos. Gracias a ellos podr\u00e1s apuntar a los elementos HTML que contengan un determinado atributo<\/strong>. Te presento los tres tipos m\u00e1s importantes: <\/p>\n\n\n\n
\n
\n