LM | DÍA 10: TIPOS DE SELECTORES

Día 10. En el día de hoy, hemos estado estado estudiando los diferentes tipos de selectores con los que vamos a estar trabajando en CSS. Este es un tema importante, el cual, deberemos de aplicar en nuestros proyectos de Lenguaje de Marcas para la segunda entrega. 

Derechos de autor aquí

Selectores: Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Está formada por una parte llamada "selector" y otra parte llamada "declaración". Vamos a ver los tipos de selectores más utilizados en la mayoría de los sitios web: 

1. Selector Universal: 

Sirve para seleccionar todos los elementos de la página. Se representa mediante un asterisco: 

* {margin: 0px}

2. Selector de Tipo o de Etiqueta:

Sirve para seleccionar todos los elementos de la página web cuya etiqueta coincida con el selector. 

p{font-family: Verdana; color: red}

3. Selector Descendente:

Se puede construir con dos o más selectores separados por un espacio en blanco. 

p a {font-size: 50px} -> Se aplicará el estilo a todos los enlaces a que se encuentren en un párrafo. 

Si no se quiere aplciar la selección a los hijos pero sí a los nietos, se combinaría con el selector universal, es decir, con el asterisco. 

p * a {font-size: 50px}

4. Selector Hijo: 

Selecciona el primer descendiente de un elemento, es decir, el "hijo", excluyendo de la selección al resto de los descendientes. 

p > a{font-size: 50px}

5. Selector Adyacente:

Selecciona elementos que son "hermanos" y son adyacentes en el código. 

h1 + h2 {font-size: 50px}

6. Selector de Atributos:

• Ejemeplos de uso del selector de atributos:
• span[class] { font-family : Arial; }
• span[class = “azul”] { color: blue; }
• span[class ~ = “grandona”] { font-size: 50px; }
• span[lang |= “es”] { color: red; }

7. Selector de Clase: 

Va a permitir especificar disantos estilos para un mismo elemento o bien generar etilos tipo para poder aplicarlos a cualquier etiqueta XHTML. 

.clase {font-size: 50px}

8. Selector ID:

Se utiliza para seleccioanr un solo elemento, es decir, no puede haber dos elementos con el mimo id. 

<p id = "identificador"> Texto de ejemplo</p>

Finalmente, pusimos en práctica todos los tipos de selectores impartidos. El resultado se puede ver aquí en una pequeña web de ejemplo, alojado en neocities.