/**** Especificidad ***/
1000 - En línea, es el que se le aplica directamente al elemento en HTML mediante style.
100 - Selección po ID.
10 - Selección por Clas, por Atributo y por pseudoelemento.
1 - Selección por elemento "H - span - Header - p"
/**** Herencia ****/
!important - Se salta todas las especificidades pero sigue teniendo en cuenta la especificidad.
Ejemplo:
h2.coloreado{ /**+ Especificidad = 11 **/
color : red !important;
}
.coloreado{ /*** Especificidad = 10 **/
color: green;
}
/*** Herencia ***/
Con inherit los elementos heredan propiedades de sus padres o contenedores,
Con initia se resetea la herencia.
/******** Selectores ********/
/** Por Atributo ***/
[class]{
/* Selecciona a todos los elementos que tengan una clase*/
font-size: 6px;
}
/* Esto seleccionará todos los elementos cuyo atributo class comienza con "mi-clase" */
[class^="mi-clase"] {
/* Estilos para estos elementos */
background-color: yellow;
}
/* Esto seleccionará todos los elementos cuyo atributo class contiene "mi-clase" en cualquier lugar */
[class*="mi-clase"] {
/* Estilos para estos elementos */
background-color: yellow;
}
[nombreAtributo]{
/*Cualquier nombre puede darse como atributo */
color: blue;
}
[href="https://una-web.com"]{
/*Elementos con atributo href que lleven a esa dirección */
color: darkgreen;
}
[href^="loque-sea"]{
/*Elementos con atributo href y que empiezen con loque-sea,
independientemente de lo que venga después.
Viene siendo [href^="loque-sea.....]*/
}
[href$='loque-sea']{
/* Elementos cuyo valor del atributo href finalice con 'loque-sea',
independientemente de lo que antes tenga.*/
}
[href*='loque-sea']{
/*Elementos cuyo valor del atributo href contenga 'loque-sea'
independientemente de lo que tenga antes o después de esa plabra*/
}
.contenedor p {
/* Selecciona a todos los elementos p que se encuentren dentro un contenedor,
sin importar la descendencia*/
}
.contenedor>p {
/* Selecciona a todos los elementos p que sean hijos directos */
}
nav.contenedor{
/*Selecciona a los elementos nav que tengan la clase contenedor*/
}
h+p2{
/*Selecciona al hermano adyacente y solo al adyacente*/
}
h2~p{
/*Selecciona a todos los hermanos, a todos*/
}