jueves, 26 de marzo de 2020

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
Etiquetas: , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)