Tipos Selectores

Permiten seleccionar de forma precisa elementos individuales o conjuntos de elementos dentro de una página web. Una regla css está formada por una parte llamada “selector” (indica a quién hay que hacérselo) y otra parte llamada “declaración” (indica que hay que hacer).

• Selector universal - se utiliza para seleccionar todos los elementos de la página. No se se suele utilizar, ya que es difícil aplicar el mismo estilo a toda la web

                            * {
                            }
                          

• Selector de tipo o etiqueta - selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector

  
                            p{ }
  
                            CSS permite agrupar reglas individuales en una sola con un selector múltiple si se desea aplicar el mismo estilo.
                            h1, h2, h3 {
                            }
                        

• Selectores ascendentes/descendentes - selecciona los elementos que se encuentran dentro de otros elementos. Por ejemplo escoge todos los elementos span que se encuentran dentro solo de p indiferente si es o no “hijo directo”

                            p span{ }
  
                            Se pueden utilizar selectores descendentes para aplicar diferente estilos a los elementos del mismo tipo:                      
                            h1 span{ }
                            h2 span{ } 
  
                            A no se confundir la combinación de selectores                       
                            p, a, span {  } 
  
                            Con los selectores descendentes
                            p a span {  }
  
                            Se pueden combinar selectores descendentes con universales para restringir el alcance de un selector descendente:
                            /*aquí se muestran todos los enlaces de color rojo*/
                            p a {color:rojo}
  
                            /*mientras que*/
                            p*a{color:rojo}
  
                            /*se traduce como: todos los elementos 'a' que se encuentran dentro de un elemento, que a su vez, esta dentro de 'p'*/
                          

• Selector de clase - se utiliza para aplicar estilo a un solo elemento. Para esto hay que crear una clase “clase_diferente” y aplicarla al elemento. También hay que poner por delante del nombre de la clase un punto '.'.

  
                            .clase_diferente {  }
                            
                            Es posible aplicar varias clases css sobre el mismo elemento:                        
                            <p class=”clase_diferente estilo_proprio regla_css” >texo…..</p>
                          

• Selector de ID - se utiliza para aplicar un estilo a un único elemento en toda la web.

  
                          #id_proprio{ }
                          
                          Se puede restringir el alcance del selector mediante la combinación con otros selectores:
                          p#id_proprio{  } 
                        

  En este caso se aplica la regla css solamente al elemento de tipo p que tenga un atributo igual al indicado.
• Combinación de selectores básicos - se utiliza para restringir el alcance de las reglas css. En este caso se selecciona aquellos elementos con una clase especial que se encuentran dentro de cualquier elemento con una clase aviso

  
                        .aviso .especial {  } 
                      

  Ahora el selector seleccionará solo aquellos elementos de tipo span con un atributo de la clase especial que están dentro de cualquier elemento de tipo div que tenga un atributo aviso:

  
                          div.aviso span.especial {  }
                        

En las hojas de estilo complejas es habitual de que varias reglas css se apliquen al mismo elemento html provocando una colisión de estilos. Cuando hay dos selectores idénticos se aplica el último especificado. Pero si hay un elemento con varias declaraciones se aplica la más especifica.

Siguiente

Anterior