Mostrando entradas con la etiqueta Selectores CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta Selectores CSS. Mostrar todas las entradas

jueves, 26 de marzo de 2020

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)



Publicado por en No hay comentarios:
Etiquetas: , ,

Selectores en CSS

Los selectores básicos en CSS son:
  • De tipo
  • De clase
  • De ID
  • Universales
  • De atributo

Nota: Una clase se asigna en HTML mediante la propiedad "class"; un ID con "id", el atributo depende de las propiedades del elemento. 

/*De tipo (un elemento HTML)*/
div {propiedad: valor;}

/*De clase (asignado a un elemento HTML con el atributo class)*/
.fondo {propiedad: valor;}

/*De ID (asignado a un elemento HTML con el atributo id)*/
#cuadro {propiedad: valor;}

/*Universales (se aplican a todas las etiquetas, * significa todos)*/
* {propiedad: valor;}

/*De atributo (se aplica si se cumple con determinado valor en un atributo)*/
input [type=submit] {propiedad: valor;}


Ejemplos

Selector de tipo
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         p{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='unaClase'>Buenas noches mundo</p>
      <p id='unId'>Adiós mundo</p>
   </body>
</html>
Resultado: Todas las etiquetas <p> se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de clase
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         p.texto{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='texto'>Buenas noches mundo</p>
      <span class='texto'>Adiós mundo</span>
   </body>
</html>
Resultado: Solo las etiquetas <p> que tienen como clase 'texte' se ven afectado por el código CSS, si hubiéramos puesto ".text" en lugar de "p.texto" se modificaría el estilo de la etiqueta <span>

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de id
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         #elegido{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='elegido'>Buenas noches mundo</p>
      <p id='elegido'>Adiós mundo</p>
   </body>
</html>
Resultado: Solo las etiquetas <p> que tienen como id 'elegido' se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector universal
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         *{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <div>Buenas noches mundo</div>
      <h1>Adiós mundo</h1>
   </body>
</html>
Resultado: Todas las etiquetas se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de atributo
 
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         a[href='#']{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <a>Buenas tardes mundo</a><br/>
      <a href='#'>Buenas noches mundo</a><br/>
      <a href='www.google.com'>Adiós mundo</a>
   </body>
</html>
Resultado: Solo las etiquetas <a> cuyo atributo 'href' tiene valor '#' se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo




Publicado por en No hay comentarios:
Etiquetas: , ,
Suscribirse a: Entradas (Atom)