Siedrix

Probablemente todos conocemos los selectores de CSS que funcionan sobre tags, ids y clases, que pueden aplicarse a este objeto

De la siguiente manera:

div{
border:1px solid red;
}
 
.misDivs{
border:1px solid blue;
}
 
#miDiv{
border:1px solid black;
}

Como todos afectan la propiedad del borde se utilizara la jerarquía de ids sobre clases y clases sobre tags para decidir cuál es el más relevante. Por lo cual en este caso tendrá un borde de 1 px , será de estilo solido y de color negro.

Algo que es muy importante es que estas propiedades se pueden anidar de manera que tengamos mayor control sobre nuestro estilo y también para segmentar propiedades que se utilizan en distintas paginas utilizando la misma hoja de estilo para todas. Por ejemplo:

#home #miDiv{
border: none;
}

Lograra hacer que la propiedad de mi div en el home de mi aplicación web sea nulo, pero en el resto de las paginas tendrá un borde. Estos son los selectores básicos que hay que saber, pero hay selectores que nos permiten mucho más control sobre el estilo en nuestras páginas web.

Selectores de Hijos directos

Tenemos la posibilidad de aplicar selectores sobre hijos directos de la siguiente manera ul > li, que nos permiten tener control de manera para evitar que se propague a elementos que no son hijos directos. En el siguiente HTML:

<ul>
      <li>Lista número uno</li>
      <li>Lista número dos
         <ul>
              <li>Lista secundaria</li>
         </ul>
     </li>
</ul>

Y para este HTML tendremos el siguiente CSS:

ul li{
color red
}
 
ul > li{
text-decoration:underline;
}

Por lo cual tendremos Lista numero uno y Lista numero dos rojas y subrayadas, pero la Lista secundaria solo será roja.

Selectores adyacentes

Estos selectores nos permiten seleccionar los objetos que se encuentra alado de algún otro selector, estos selectores se aplican de la siguiente manera li +li{}. Sobre el mismo HTML aplicaremos el siguiente código de CSS:

li+li{
font-weight:bold
}

Tendremos a la Lista número dos de manera bold, pero ningún otro elemento.

Selectores Generales de hijos.

Me manejan de p ~ p. Tenemos la posibilidad de manera elegir elementos de un grupo que no se encuentren directamente juntos, por ejemplo tenemos este código de HTML:

Primer span

Tercer Párrafo