Los selectores CSS

Los selectores CSS son el nombre que se usa para identificar el elemento de una página web al que se le aplica una determinada regla.

Existen varios tipos de selectores

selectores de tipo

ya habrás visto un ejemplo en la introducción. Son los elementos definidos en el lenguaje HTML como p, table, img, div.

clases

Elementos de la página con un atributo class cuyo valor sea el especificado en la definición de la regla. Pueden haber varios elementos con la misma clase (class)

Id

Elementos de la página con un atributo id cuyo valor sea el nombre usado para la regla. Los id no se deben repetir dentro de una página

Estos son los selectores básicos y su uso es muy simple como verás en estos ejemplos

En el primer caso esa regla se aplicaría a todos los elementos td (celdas de tabla), en el segundo a los elementos con atributo class="boton" y en el último a todos los elementos con atributo id="elemento".

Lo dicho hasta ahora sobre selectores vienen desde el primer estandard de CSS. Pero actualmente con los selectores se puede afinar mucho más a lo hora de elegir el elemento de la página al que aplicar una regla. Se pueden añadir modificadores a los selectores para que las reglas se apliquen de manera condicional.

En estas definiciones que siguen elemento es cualquier selector: de tipos (a,p...), de clase (.clase) o de id (#ident)

• elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.

a[href^="https://"]{color=red}

Todos los enlaces <a></a> que comienzan con https estarán en rojo

• elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.

img[src$=".gif"] { border=2}

Todas aquellas imágenes tipo gif llevarán un borde de 2 px

• elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor sea igual a la cadena de texto indicada.

p[title="importante"]{color:red; font-weight:bold;}

Todos los elemento p cuyo atributo title sea la palabra importante se colocan en color rojo y en negrita

• elemento[atributo~="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada, puede tener otras valores.

p[title~="nota importante"]{color:red; font-weight:bold; font-size:18px}

Todos los elemento p cuyo atributo title contenga la palabra importante, puede contener otras, se colocan en color rojo, en negrita y con texto de 18px

Estos selectores amplían la forma de aplicar los estilos, ya no se aplican solo en función del tipo de elemento, del atributo id o class, podemos aplicar estilos en función del contenido.

Los selectores pueden combinarse o bien para compartir una regla, o bien para modificar el elemento e la página al que se refiere. :

Compartir regla

La combinación de selectores para compartir una regla es tan simple como esciribir los nombres de los selectores separados por comas y a continuación escribir la regla que comparten

 h1, h2, h3, h4 {
       color: red;
       font-weight: bold;
}

Pueden compartirse selectores de cualquier tipo, sean simples o pseudo selectores o combinaciones jerárquicas. No hay límitación.

Compartir regla abreviado con :is :where

 

Cuando combinamos muchos selectores el código queda difícil de leer, para mejorar esto se pueden usar  :is y :wehre. Su uso es similiar. La diferencia entre :is y :where está en su prioridad como medida de lo específicos que son al definir los elementos a que se refiere (specifity).

• :where tiene prioridad mínima, si antes o después de él pusiera h1{color blue} los <h1> aparecerían azules.
• :is tiene la prioridad de sus selectores: .main h1 tiene más prioridad que .h1, por que es más específico, más concreto.

Los estilos con más prioridad o specifity prevalece sobre los que tienen menos

 .main :is(h1, h2, h3, h4) {
       color: red;
       font-weight: bold;
}

 .main :where(h1, h2, h3, h4) {
       color: red;
       font-weight: bold;
}

.main :is(h1, h2, h3, h4) {
      color: red;
      font-weight: bold;
}

 

Selector por clases

Es como un selector de selectores, seleccionan selectores con una determinada clase.

div.rojo
{color: red;
background-color: lightblue;
}
<div class="rojo">Esto está en rojo sobre azul</div>
<p class="rojo">Está normal</p>

Selectores dependientes

Puede definirse selectores para referirse a elementos que estén contenidos en otros, como un párrafo dentro de un div o una imagen dentro de una celda o dentro de un elemento de clase determinada. La relación indica que está contenido

 h1 a{
       text-decoration: none;
}

Hijos:

Un selector hijo se usa para definir un elemento que es hijo de otro, es decir, que está incluido en otro elemento padre en el primer nivel. Si están anidados no se considerena hijos.

 div > p{
      background-color: lightblue;
}
<div><p>Está en azul</p></div>
<section><p>No está en azul</p></section>

En el ejemlo el primer párrafo es hijo de div el segundo no lo es (podría ser nieto), es hijo de section

Hermano primero

Esta es una regla que selecciona el primer elemento que aparece después del otro. Podríamos decir el primer elemento hermano de uno dado.

 div + p{
     color: res;
}
<div>Soy un bloque div</div>
<p>Está en azul<p>
<p>No está en azul<p>

Hermanos

Complementa al anterior, selecciona todos los elementos que siguen a uno determinado.

 div ~ p{
     color: red;
}
<div>Soy un bloque div</div>
<p>Está en rojo<p>
<p>Yo también soy rojo<p>
<section><p>Este no es rojo</p></section>