CSS3: Selectores avanzados y pseudo clases. Descripción, uso y ejemplos

by Silvia Mazzetta Date: 29-10-2019 css css3 design

Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para aplicarle estilos de color, tamaño, separación, etc. Los selectores más comunes son aquellos que se asignan a clases (class), identificadores (id) o directamente a elementos HTML como por ejemplo capas (div). Sin embargo en desarrollos complejos necesitamos utilizar otros selectores más avanzados para poder aplicar diferentes estilos en elementos anidados o listados complejos, como puede ser una capa dentro de otra con el mismo nombre de clase.

Hoy en día CSS3 nos permite utilizar múltiples selectores de forma que podemos aplicar estilos a cada uno de los elementos de nuestro desarrollo sin necesidad de aplicar nombres de clase o id. Vamos a realizar un repaso de ellos viendo ejemplos prácticos de su uso. Para ello, utilizaremos la una estructura de elementos anidados a los que iremos aplicando diferentes estilos.

 

Selectores CSS

 
Selector Ejemplo Descripción
.class .ejemplo Selecciona todos los elementos con class="ejemplo"
.class1.class2 <div class="name1 name2">...</div> Selecciona todos los elementos con las clases name1 y name2
.class1 .class2 <div class="name1">
  <div class="name2">
    ...
  </div>
</div>
Selecciona todos los elementos con .name2 que son descendientes de un elemento con .name1
#id #firstname Selecciona el elemento con id="firstname"
* * Selecciona todos los elementos
element p Selecciona todos los elementos <p>
element.class p.intro Selecciona todos los <p> con class="intro"
element,element div, p Selecciona todos los <div> y los <p>
element element div p Selecciona los <p> dentro el elemento <div>
element>element div > p Selecciona los <p> hijos directos del elemento <div>
element+element div + p Selecciona los <p> positionados inmediatamente despues del elemento <div>
element1~element2 p ~ ul Selecciona los <ul> precedidos por <p> element (o que antes tienes un p)
[attribute] [target] Selecciona todos los elementos que tengan "attribute"
[attribute=value]

[target=_blank]

Selecciona todos los target="_blank"
[attribute~=value] [title~=flower] Selecciona todos los elementos que contienen un atributo cn la la palabra "flower"
[attribute|=value] [lang|=en] Selecciona todos los elementos cuyo dioma es contienen"en"
[attribute^=value] a[href^="https"] Selecciona todos los elementos <a> cuyo atributo href empieze con "https"
[attribute$=value] a[href$=".pdf"] Selecciona todos los elementos <a> cuyo atributo href termine con ".pdf"
[attribute*=value] a[href*="w3schools"] Selecciona todos los elementos <a> cuyo atributo href contenga el substring "w3schools"
empty p:empty Selecciona todos los elementos <p> que no tienen hijos
:first-child p:first-child Selecciona el elemento <p> que es el primer hijo de su padre
::first-letter p::first-letter Selecciona la primera letra de cada elemento <p>.
::first-line p::first-line Selecciona la primera línea de cada elemento <p>.
:first-of-type p:first-of-type Selecciona cada elemento <p> que es el primer elemento <p> de su padre.
:last-child p:last-child Selecciona el elemento <p> que es el último hijo de su padre
:last-of-type p:last-of-type Selecciona cada elemento <p> que es el último elemento <p> de su padre.
:link a:link Selecciona todos los links
:not(selector) :not(p) Selecciona cada elemento que NO es un <p>
:nth-child(n) p:nth-child(2) Selecciona el elemento <p> que es el segundo hijo de su padre
:nth-last-child(n) p:nth-last-child(2) Selecciona cada elemento <p> que es el segundo hijo de su padre, contando desde el último hijo.
:nth-last-of-type(n) p:nth-last-of-type(2) Selecciona cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el último hijo.
:nth-of-type(n) p:nth-of-type(2) Selecciona cada elemento <p> que es el segundo elemento <p> de su padre.
:only-of-type p:only-of-type Selecciona cada elemento <p> que es el único elemento <p> de su padre.
:only-child p:only-child Selecciona cada elemento <p> que es el único hijo de su padre


 

EJEMPLOS PRACTICOS



 

1

 
[class*="col-"] { border-color: red;}

Asignamos a todos los elementos que contengan la clase con la palabra "col-" el color rojo.



 

2

 
a[target="_blank"] { color: green; } 

Asignamos a todos los elementos "a" que tengan el atributo target igual a blank, el color verde.

 

3

 
a:not([target="_blank"]) { color: purple;  }
 

Asignamos a todos los elementos "a" que NO tengan el atributo target igual a blank, el color morado.



 

4

 
li:first-of-type + li {color: red;}
<ul>    
<li>Uno</li>    
<li>Soy rojo</li>    
<li>Tres<br/>
</li>
</ul>

Asigna el color rojo al primer elemento de la lista adyacente al primer li. O sea al 2 < li >.

 

5

 
<style>
#pluto h2 ~ p {
color: red;
}
</style>
<article id="pluto"> 
<h1>Lorem ipsum</h1> 
<p>Dolor sit amet</p> 
<h2>Lorem ipsum</h2> 
<p>Soy rojo</p> 
<h3>Lorem ipsum</h3> 
<p>Soy rojo</p>
</article>
 

Con ~ indicamos los elementos que preceden el elemento que se encuentra a la derecha.

En este fragmento de código, ambos párrafos después de < h2 > serán rojos, pero el primero no, ya que no viene después de un < h2 > en el documento.

 

6.

 
<style>
#pippo + p { 
color: red;
}
</style>
<div id="pippo">
<span>
<p>Soy Silvia</p>
</span>
<p>Soy Silvia</p>
<span>
<p>Soy Silvia</p>
</span>
</div>
<p>Soy rojo!</p>
 

Selecciona todos el elemento p adyacente al div especificado.

 

7.

<style>
div#divb ~ p {
background-color:lightgreen;
}
</style>
<div id="divb">
    <p>Parrafo - 1 en un div</p>
    <p>Parrafo - 2 en un div</p>
</div>
<p>Parrafo - 3 soy verde </p>
<p>Parrafo - 4 soy verde</p>
<p>Parrafo - 5 en verde </p>
<div> 
	<p>Parrafo - 6 en un div</p>
</div>
<p>Parrafo - 7 soy verde</p>
 

El ejemplo establece el color de texto rojo para todos los elementos "p" de un hermano en un elemento DIV con ID "divb" (<div id="divb">) .


 

Los selectores CSS avanzados.



 

Los selectores CSS avanzados permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.

A menudo nos encntreremos con varios bloques CSS diferentes con los mismos estilos, algo que es perjudicial, ya que esto hará que el documento CSS ocupe más y por lo tanto, tarde más en descargarse.

Una buena práctica es ahorrar texto y simplificar nuestro documento CSS lo máximo posible, por lo que podemos hacer uso de la agrupación CSS.

Consejo: Esto puede parecer poco importante a priori, pero a medida que avanzamos con nuestro diseño, los documentos CSS se hacen tremendamente grandes y difíciles de mantener, por lo que cuanto más sencillo sea, mejor.

 
CSS Selectores
#d1 > div > p {
color: red;
}

  • ID Selector (#d1)
  • Elemento Selector (div, p)
  • Hijos directos (#d1 > div, div > p)
#d1  div  p {
color: red;
}

  • ID Selector (#d1)
  • Elemento Selector (div, p)
  • Selector descendiente #d1 div, div p)
#d1 > div > div p {
color: red;
}

  • ID Selector (#d1)
  • Elemento Selector (div, p)
  • Hijo directo (#d1 > div, div > div)
  • Selector Descendiente (div p)
p + div > p {
color:red;
}

  • Element Selector (p,div)
  • Adyacente (p + div)
  • Hijo directo (div > p)
p + div  p {
color:red;
}

  • Selector (p, div)
  • Adyacente (p + div)
  • Descendiente (div p)
#d11.childcntl {
color:red;
}

  • ID Selector (#d11)
  • Selector clase(.childcntl)
#d1 > p, #d11 > p {
color:red;
}

  • ID Selector (#d1, #d11)
  • Hijo directo (#d1 > p, #d11 > p)
#d11 + .childcntl {
color:red;
}

  • ID Selector (#d11)
  • Class (.childcntl)
  • Adyacente (#d11 + .childcntl)






Foto: FreePik  
 
by Silvia Mazzetta Date: 29-10-2019 css css3 design visitas : 5954  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Artículos relacionados

Nuevas unidades de ventana gráfica - CSS

'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web. El proyecto tiene 15 áreas de enfoque…

Container queries: libera el poder de escribir media queries

El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…

¿Por qué no deberíamos usar el color negro?

A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores…

Utilidades de los selectores :where y :is

Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a…

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…