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
<style>
.boton{
background-color: red;
border: thin solid black;
width:100px;
}
</style>
Definición y uso de la clase boton
.main :where(h1, h2, h3, h4) {
color: red;
font-weight: bold;
}
.main :is(h1, h2, h3, h4) {
color: red;
font-weight: bold;
}
Todos los encabezamientos desde h1 a h4 dentro de una clase .main aparecen en color rojo y en negrita
Selector por clases
Es como un selector de selectores, seleccionan selectores con una determinada clase.
<head>
<style>
div.rojo{
color: red;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="rojo">Esto está en rojo sobre azul</div>
<p class="rojo">Está normal</p>
</body>
La regla solo se aplica a los bloque div con atributo class = rojo
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;
}
Los enlaces (<a>) dentro de un bloque h1 no se subrayarán, las restantes estarán subrayadas por defecto
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.
<head>
<style>
div > p{
background-color: lightblue;
}
</style>
</head>
<body>
<div><p>Está en azul</p></div>
<section><p>No está en azul</p></section>
</body>
Los párrafos (<p>) cuyo padre sea un bloque div tendrán un fondo azul claro
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.
<head>
<style>
div + p{
color: res;
}
</style>
</head>
<body>
<div>Soy un bloque div</div>
<p>Está en azul<p>
<p>No está en azul<p>
</body>
El párrafos (<p>) que aparece inmediatemente después de un bloque div
Hermanos
Complementa al anterior, selecciona todos los elementos que siguen a uno determinado.
<head>
<style>
div ~ p{
color: red;
}
</style>
</head>
<body>
<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>
</body>
Los párrafos (<p>) que aparece después de un bloque div están en rojo.
Afinando la selección: atributos
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.
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.
Las deficiones CSS son muy potentes. Se puede seleccionar y modificar el formato de casi cualquier parte de la página web sin tocar su código HTML
Selectores combinados
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;
}
Todos los encabezamientos desde h1 a h4 aparecen en color rojo y en negrita
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;
} Todos los encabezamientos desde h1 a h4 aparecen en color rojo y en negrita
Selector por clases
Es como un selector de selectores, seleccionan selectores con una determinada clase.
div.rojo.azul{
color: red;
background-color: lightblue;
}
<div class="rojo azul">Esto está en rojo sobre azul</div>
<div class="rojo">Está normal</div> La regla solo se aplica a los bloque div que tenga las clases rojo y azul
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;
} Los enlaces (<a>) dentro de un bloque h1 no se subrayarán, las restantes estarán subrayadas por defecto
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>
Los párrafos (<p>) cuyo padre sea un bloque div tendrán un fondo azul claro
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> El párrafos (<p>) que aparece inmediatemente después de un bloque div
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>
Los párrafos (<p>) que aparece después de un bloque div están en rojo.
Este sistema de definición de selectores permite formatear cualquier elemento de la página sin aplicarle estilos directamente en HTML.
