Los selectores especifican que elementos queremos modificar. En esta introducción hablé de la estructura básica de una regla en CSS. En este post hablaré de los selectores básicos de los cuales ya habrás visto alguno si sigues este blog.
Selector universal
Se representa con un asterisco y sirve para hacer referencia a todos los tipos de elementos en el documento.
|
1 |
*{} |
Este tipo de selector se suele usar para poner unos valores por defecto a todo el documento, como la familia de la fuente.
La pequeña diferencia que tiene respecto a usar el body es que el universal aplica la regla a cada uno de los elementos y no depende de propiedades heredadas del body.
Selector de tipo
Referencia a un tipo de elemento o varios (lista delimitada por comas).
|
1 |
h1, h2, h3 {} |
Puede darse el caso de quieras que un grupo de elementos compartan una regla pero a mayores quieras que un tipo en concreto tenga una propiedad en especial:
|
1 2 3 4 5 6 7 |
h1, h2, h3 { color:blue; } h1{ text-transform: uppercase; } |
Selector de clase
Referencia al elemento o elementos que tengan el mismo valor del atributo class. Por ejemplo tenemos un párrafo con la clase grande:
|
1 |
<p class=”grande”>Este párrafo tiene la fuente grande</p> |
Se puede hacer referencia al elemento con la clase de 2 formas. Una de ellas es poniendo un punto y el nombre de la clase
|
1 |
.grande{} |
La otra forma sería indicar el elemento <p> y a continuación la clase:
|
1 |
p.grande{} |
Esto es ideal en caso de que tengas diferentes elementos pero que compartan clase, así puedes hacer referencia a un tipo de elemento concreto.
Supongamos que tenemos un elemento con 2 clases:
|
1 |
<p class=”grande cursiva”>Este párrafo tiene la fuente grande y cursiva</p> |
Para hacer referencia al elemento que tiene la clase grande y cursiva sería asi:
|
1 |
p.grande.cursiva{} |
Selector de ID
Funciona como el selector de clases sólo que en vez de fijarse en el valor de class lo hace con el de id. En vez de usar un punto se usa el hash (#). Se usa para un elemento único en todo el documento.
|
1 |
#unico{} |
Selector descendiente
Hace referencia a un elemento que es descendiente de otro elemento (incluso puede estar dentro de otro elemento especifico), pero no es un hijo directo. Para entenderlo mejor expondré el siguiente ejemplo
|
1 2 3 |
Table p{ Color: red; } |
Hago referencias a todos elementos <p> que están dentro de una tabla siendo la estructura la siguiente
|
1 2 3 4 5 |
<table> <tr> <td><p>párrafo dentro de una celda</p></td> </tr> </table> |
Como podéis ver basta con que el elemento al que se hace referencia este dentro del elemento padre sin importar a cuantos niveles.
No es preciso que sea con tipos de elemento también vale las clases y las ids.
Y hasta aquí los selectores básicos, más adelante hablaré de los avanzados. Espero que sirva de ayuda y disfrutéis el finde. Saludos 😉