In learning code: Agrupación de selectores CSS

Mediante CSS se permite aplicar una serie de propiedades a varios elementos que pueden cumplir diferentes condiciones, la más usual es la de ser un elemento "hijo" de otro, tenemos:

Combinación simple de selectores
Selector descendente
Selector de etiqueta de clase
Selector de hijos
Selectores adyacentes
Pseudoclases

Aplicación y ejemplo

Combinación simple de selectores

En este caso se aplica las mismas propiedades a diversos elementos, pueden ser cualquier tipo de selector. Se separan con comas ',' y luego se definen las propiedades y sus valores.

<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        p,a,span{
	   color: #139349;
	   font-family: 'Tahoma'
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <a>Soy una oración</a><br/><br/>
      <span>Palabra</span>
      <p>Soy un parrafo</p>
   </body>
</html>

Soy una oración

Palabra

Soy un parrafo

Combinación de selectores descendente

En este caso se aplica las propiedades al último elemento si cumple con la condición de estar anidado dentro del selector anterior. En el ejemplo, se tiene una etiqueta <div> que contiene una etiqueta <p> y dentro una <span>. Además, dos etiquetas <span>. El código CSS indica que solo se aplique la propiedad si hay un <span> dentro de un <div>.

Los elementos descendentes solo se separan mediante espacios.

<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        div span{
	   color: #F00041;			
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <div> 
	<p>Soy una <span>palabra</span> especial</p>
      </div>      
      <span>Amigo</span><br/><br/>
      <span>Enemigo</span>
   </body>
</html>

Soy una palabra especial

Amigo

Enemigo

Combinación de etiqueta con clase En este caso se aplica las mismas propiedades las etiquetas o elementos HTML que tienen como clase la especificada en el código CSS. En el ejemplo el color solo cambiará si la etiqueta es de tipo <p> y además el nombre de la clase es 'texto'
`<!DOCTYPE html> <html> <head> <title>Prueba</title> <!-- Código CSS --> <style> p.texto{ color:#F000F0; } </style> </head> <body> <!-- Elementos HTML --> <span class='texto'>Span con clase</span> <p>Párrafo sin clase</p> <p class='texto'>Párrafo con clase</p> </body> </html>`	Span con clase Párrafo sin clase Párrafo con clase

Combinación de selectores hijos En este caso se aplica las propiedades al último elemento si cumple con la jerarquía establecida, para el ejemplo, se aplicará solo si <span> está contenido en <p>, que a la vez debe estar contenido en <div>. Solo en ese caso cambia de color el contenido de <span>
`<!DOCTYPE html> <html> <head> <title>Prueba</title> <!-- Código CSS --> <style> div > p > span{ color:#0007D8; } </style> </head> <body> <!-- Elementos HTML --> <div> <p>Div <span>que contiene</span> un párrafo y un span</p> </div> <p>Párrafo que <span>contiene</span> un span</p> </body> </html>`	Div que contiene un párrafo y un span Párrafo que contiene un span

Combinación de selectores adyacentes En este caso se aplica las mismas propiedades al segundo elemento luego del signo + siempre y cuando este se encuentre luego del elemento señalado previamente. Para el ejemplo, se aplica el efecto de color y negrita al elemento <span> solo si está después de un elemento <label>
`<!DOCTYPE html> <html> <head> <title>Prueba</title> <!-- Código CSS --> <style> label + span{ color: #FC943E; font-weight: bold; } </style> </head> <body> <!-- Elementos HTML --> <label>Nombres: </label> <span>Argos</span> <br/> <span>Nombres: </span> <label>Garfield</label> </body> </html>`	Nombres: Argos Nombres: Garfield

Combinación de etiquetas con atributos especiales En este caso se aplica las propiedades al elemento al cambiar su estado según lo especificado. En este ejemplo se emplea 'hover' que significa que cuando pasemos el cursor encima del elemento, este debe cambiar de color.
`<!DOCTYPE html> <html> <head> <title>Prueba</title> <!-- Código CSS --> <style> span:hover{ color: red; } </style> </head> <body> <!-- Elementos HTML --> <span>Argos</span> </body> </html>`	Argos (Si no pasa el cursor) Argos (Si pasa el cursor)

In learning code

Páginas

jueves, 26 de marzo de 2020

Agrupación de selectores CSS

Aplicación y ejemplo

No hay comentarios:

Publicar un comentario