¿ Que son los selectores en css?
¿ Cuales son los nuevos selectores en css3 ?
¿ Que son los selectores de hijos ?
¿ Que son los selectores adyacentes ?
¿ Que son los selectores de atributos ?
1 respuesta
Selectores
Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".
La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.
A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.
El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.
Selectores de CSS 3
La versión CSS 3 incluye todos los selectores de CSS 2.1 y añade otras decenas de selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades.
En primer lugar, CSS 3 añade tres nuevos selectores de atributos:
elemento[atributo^="valor"]
, selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
elemento[atributo$="valor"]
, selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
elemento[atributo*="valor"]
, selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:
/* Selecciona todos los enlaces que apuntan a una dirección de correo
electrónico */
a[href^="mailto:"] { ... }
/* Selecciona todos los enlaces que apuntan a una página HTML */
a[href$=".html"] { ... }
/* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra
"capítulo" */
h1[title*="capítulo"] { ... }
a {
color: rgb(255, 255, 255)
}
/* Selecciona todos los enlaces que apuntan a una dirección de correo
electrónico */
a[href^="mailto:"] {
background: rgb(15, 184, 72)
}
/* Selecciona todos los enlaces que apuntan a una página HTML */
a[href$=".html"] { background: rgb(117, 35, 210) }
/* Selecciona todos los títulos h1 cuyo atributo title contenga la
palabra
"capítulo" */
h1[title*="capítulo"] { color: rgb(49, 71, 227) }
<a href="mailto:[email protected]">Enlace correo
electrónico</a>
<a href="pagina.html">Enlace pagina html</a>
<h1 title="tiene la palabra capítulo">hola mi atributo title contiene la palabra capítulo</h1>
Otro de los nuevos selectores de CSS 3 es el "selector general de elementos hermanos", que generaliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2
y selecciona el elemento2 que es hermano de elemento1 y se encuentra detrás en el código HTML. En el selector adyacente la condición adicional era que los dos elementos debían estar uno detrás de otro en el código HTML, mientras que ahora la única condición es que uno esté detrás de otro.
Si se considera el siguiente ejemplo:
h1 + h2 { color: rgb(226, 236, 67) } /* selector adyacente */
h1 ~ h2 { background: rgb(193, 67, 149) } /* selector general de hermanos */
<h1>Titulo h1</h1>
<h2>Titulo h2</h2>
<p>Parrafo</p>
<div>
<h2>Titulo h2 dentro de div</h2>
</div>
<h2>Titulo h2 despues de div</h2>
El primer selector (h1 + h2
) sólo selecciona el primer elemento <h2>
de la página, ya que es el único que cumple que es hermano de <h1>
y se encuentra justo detrás en el código HTML. Por su parte, el segundo selector (h1 ~ h2
) selecciona todos los elementos <h2>
de la página salvo el segundo. Aunque el segundo <h2>
se encuentra detrás de <h1>
en el código HTML, no son elementos hermanos porque no tienen el mismo elemento padre.
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se utilizan ::
en vez de :
delante del nombre de cada pseudo-elemento:
::first-line
, selecciona la primera línea del texto de un elemento.
::first-letter
, selecciona la primera letra del texto de un elemento.
::before
, selecciona la parte anterior al contenido de un elemento para
insertar nuevo contenido generado.
::after
, selecciona la parte posterior al contenido de un elemento para
insertar nuevo contenido generado.
CSS 3 añade además un nuevo pseudo-elemento:
::selection
, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas, entre las cuales se encuentran:
elemento:nth-child(numero)
, selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
elemento:nth-last-child(numero)
, idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
elemento:empty
, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
elemento:first-child
y elemento:last-child
, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
elemento:nth-of-type(numero)
, selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
elemento:nth-last-of-type(numero)
, idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
Algunas pseudo-clases como :nth-child(numero)
permiten el uso de expresiones complejas para realizar selecciones avanzadas:
li:nth-child(2n+1) { ... } /* selecciona todos los elementos impares de
una lista */
li:nth-child(2n) { ... } /* selecciona todos los elementos pares de una
lista */
/* Las siguientes reglas alternan cuatro estilos diferentes para los
párrafos */
p:nth-child(4n+1) { ... }
p:nth-child(4n+2) { ... }
p:nth-child(4n+3) { ... }
p:nth-child(4n+4) { ... }
Empleando la pseudo-clase :nth-of-type(numero)
se pueden crear reglas CSS que alternen la posición de las imágenes en función de la posición de la imagen anterior:
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
Otro de los nuevos selectores que incluirá CSS 3 es :not()
, que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector:
:not(p) { ... } /* selecciona todos los elementos de la página que no sean
párrafos */
:not(#especial) { ... } /* selecciona cualquier elemento cuyo atributo id
no sea "especial" */
Selector de hijos
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el "signo de mayor que" (>
).
Mientras que en el selector descendente sólo importa que un elemento esté dentro de otro, independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe ser hijo directo de otro elemento.
p > span { background: rgb(193, 67, 149) }
<p>
<span>Texto1</span>
</p>
<p>
<a href="#">
<span>Texto2</span>
</a>
</p>
En el ejemplo anterior, el selector p > span
se interpreta como "cualquier elemento <span>
que sea hijo directo de un elemento <p>
", por lo que el primer elemento <span>
cumple la condición del selector. Sin embargo, el segundo elemento <span>
no la cumple porque es descendiente pero no es hijo directo de un elemento <p>
.
Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector descendente y el selector de hijos:
p a { background: red; }
p > a { background: red; }
<p>
<a href="#">Enlace1</a>
</p>
<p>
<span>
<a href="#">Enlace2</a>
</span>
</p>
El primer selector es de tipo descendente (p a
) y por tanto se aplica a todos los elementos <a>
que se encuentran dentro de elementos <p>
. En este caso, los estilos de este selector se aplican a los dos enlaces.
El segundo selector es de hijos (p > a
) por lo que obliga a que el elemento sea hijo directo de un elemento <p>
. Por tanto, los estilos del selector p > a
no se aplican al segundo enlace del ejemplo anterior.
Selector adyacente
El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento padre es el mismo) y están seguidos en el código HTML. Este selector emplea en su sintaxis el símbolo +
. Si se considera el siguiente ejemplo:
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
Los estilos del selector h1 + h2
se aplican al primer elemento <h2>
de la página, pero no al segundo <h2>
, ya que:
El elemento padre de <h1>
es <body>
, el mismo padre que el de los dos elementos <h2>
. Así, los dos elementos <h2>
cumplen la primera condición del selector adyacente.
El primer elemento <h2>
aparece en el código HTML justo después del elemento <h1>
, por lo que este elemento <h2>
también cumple la segunda condición del selector adyacente.
Por el contrario, el segundo elemento <h2>
no aparece justo después del elemento <h1>
, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2
.
El siguiente ejemplo puede ser útil para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }
En muchos libros es habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. El selector p + p
selecciona todos los párrafos que están dentro de un mismo elemento padre y que estén precedidos por otro párrafo. En otras palabras, el selector p + p
selecciona todos los párrafos de un elemento salvo el primer párrafo.
El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento padre debe ser el mismo. Si se considera el siguiente ejemplo:
p + p { color: red; }
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
En el ejemplo anterior, solamente el segundo párrafo se ve de color rojo, ya que:
El primer párrafo no va precedido de ningún otro párrafo, por lo que no cumple una de las condiciones de p + p
El segundo párrafo va precedido de otro párrafo y los dos comparten el mismo padre, por lo que se cumplen las dos condiciones del selector p + p
y el párrafo muestra su texto de color rojo.
El tercer párrafo se encuentra dentro de un elemento <div>
, por lo que no se cumple ninguna condición del selector p + p
ya que ni va precedido de un párrafo ni comparte padre con ningún otro párrafo.
Selector de atributos
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
[nombre_atributo]
, selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
[nombre_atributo=valor]
, selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
[nombre_atributo~=valor]
, selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
[nombre_atributo|=valor]
, selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
A continuación se muestran algunos ejemplos de estos tipos de selectores:
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { background: rgb(115, 67, 203) }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }
<a href="#" class="hola">Enlace con atributo class</a>
<br>
<a href="#" class="externo">Enlace con atributo class</a>
<br>
<a href="http://www.ejemplo.com">Enlace con href hacia http://www.ejemplo.com</a>
<br>
<a href="#" class="hola externo">Contiene al menos una classe externo</a>
<p lang="en">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p lang="es-ES">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Enlaces:
1 - librosweb
2 - www.w3.org