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. 

  1. /*De tipo (un elemento HTML)*/
  2. div {propiedad: valor;}
  4. /*De clase (asignado a un elemento HTML con el atributo class)*/
  5. .fondo {propiedad: valor;}
  7. /*De ID (asignado a un elemento HTML con el atributo id)*/
  8. #cuadro {propiedad: valor;}
  10. /*Universales (se aplican a todas las etiquetas, * significa todos)*/
  11. * {propiedad: valor;}
  13. /*De atributo (se aplica si se cumple con determinado valor en un atributo)*/
  14. input [type=submit] {propiedad: valor;}


Ejemplos

Selector de tipo
 
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Prueba</title>
  5.       <!-- Código CSS -->
  6.       <style>
  7.          p{
  8.             color: red;
  9.             background-color: pink;
  10.          }
  11.       </style>
  12.    </head>
  13.    <body>        
  14.       <!-- Elemento HTML -->
  15.       <p>Buenas tardes mundo</p>
  16.       <p class='unaClase'>Buenas noches mundo</p>
  17.       <p id='unId'>Adiós mundo</p>
  18.    </body>
  19. </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
 
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Prueba</title>
  5.       <!-- Código CSS -->
  6.       <style>
  7.          p.texto{
  8.             color: red;
  9.             background-color: pink;
  10.          }
  11.       </style>
  12.    </head>
  13.    <body>        
  14.       <!-- Elemento HTML -->
  15.       <p>Buenas tardes mundo</p>
  16.       <p class='texto'>Buenas noches mundo</p>
  17.       <span class='texto'>Adiós mundo</span>
  18.    </body>
  19. </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
 
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Prueba</title>
  5.       <!-- Código CSS -->
  6.       <style>
  7.          #elegido{
  8.             color: red;
  9.             background-color: pink;
  10.          }
  11.       </style>
  12.    </head>
  13.    <body>        
  14.       <!-- Elemento HTML -->
  15.       <p>Buenas tardes mundo</p>
  16.       <p class='elegido'>Buenas noches mundo</p>
  17.       <p id='elegido'>Adiós mundo</p>
  18.    </body>
  19. </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
 
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Prueba</title>
  5.       <!-- Código CSS -->
  6.       <style>
  7.          *{
  8.             color: red;
  9.             background-color: pink;
  10.          }
  11.       </style>
  12.    </head>
  13.    <body>        
  14.       <!-- Elemento HTML -->
  15.       <p>Buenas tardes mundo</p>
  16.       <div>Buenas noches mundo</div>
  17.       <h1>Adiós mundo</h1>
  18.    </body>
  19. </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
 
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Prueba</title>
  5.       <!-- Código CSS -->
  6.       <style>
  7.          a[href='#']{
  8.             color: red;
  9.             background-color: pink;
  10.          }
  11.       </style>
  12.    </head>
  13.    <body>        
  14.       <!-- Elemento HTML -->
  15.       <a>Buenas tardes mundo</a><br/>
  16.       <a href='#'>Buenas noches mundo</a><br/>
  17.       <a href='www.google.com'>Adiós mundo</a>
  18.    </body>
  19. </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)