Selectores y Especificidad
## Objetivos de Aprendizaje
- Dominar la sintaxis de selectores CSS
- Entender los cálculos de especificidad
- Usar pseudo-clases y pseudo-elementos
- Combinar selectores efectivamente
## Selectores Básicos
### Selector Universal
```css
* {
margin: 0;
padding: 0;
}
```
### Selector de Elemento
```css
p {
color: #333;
}
h1, h2, h3 {
font-family: Arial, sans-serif;
}
```
### Selector de Clase
```css
.highlight {
background-color: yellow;
}
.button {
padding: 10px 20px;
}
```
### Selector de ID
```css
#header {
background-color: #333;
color: white;
}
```
### Selector de Atributo
```css
/* Tiene atributo */
[disabled] {
opacity: 0.5;
}
/* Coincidencia exacta */
[type="submit"] {
background-color: blue;
}
/* Contiene */
[class*="icon"] {
/* Coincide con icon, icon-btn, icon-large */
}
/* Empieza con */
[class^="icon"] {
/* Coincide con icon-btn pero no con btn-icon */
}
/* Termina con */
[class$="-icon"] {
/* Coincide con btn-icon pero no con icon-btn */
}
```
## Combinadores
### Selector de Descendiente
```css
article p {
line-height: 1.6;
}
```
### Selector de Hijo Directo
```css
nav > ul {
list-style: none;
}
```
### Hermano Adyacente
```css
h1 + p {
font-size: 1.2em;
}
```
### Hermano General
```css
h2 ~ p {
color: #666;
}
```
## Pseudo-Clases
### Estados de Enlace
```css
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
```
### Estado de Enfoque
```css
input:focus {
border-color: blue;
outline: none;
}
```
### Pseudo-Clases Estructurales
```css
/* Primer hijo */
li:first-child {
font-weight: bold;
}
/* Último hijo */
li:last-child {
border-bottom: none;
}
/* Enésimo hijo */
li:nth-child(odd) {
background: #f0f0f0;
}
li:nth-child(3) {
color: red;
}
/* Primero de su tipo */
p:first-of-type {
font-size: 1.2em;
}
/* Último de su tipo */
p:last-of-type {
margin-bottom: 0;
}
```
### Pseudo-Clases de Formulario
```css
input:disabled {
background-color: #eee;
}
input:enabled {
background-color: white;
}
input:checked + label {
font-weight: bold;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
```
### Selector Not
```css
p:not(.highlight) {
color: #333;
}
input:not([type="submit"]) {
width: 100%;
}
```
## Pseudo-Elementos
### Primera Línea y Letra
```css
p::first-line {
font-weight: bold;
}
p::first-letter {
font-size: 2em;
float: left;
}
```
### Before y After
```css
.button::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url("icon.png");
}
.card::after {
content: " - Oferta Especial";
color: red;
}
```
### Selección
```css
::selection {
background-color: yellow;
color: black;
}
```
### Placeholder
```css
input::placeholder {
color: #999;
font-style: italic;
}
```
## Cálculo de Especificidad
La especificidad determina qué regla gana cuando múltiples reglas se aplican.
### Niveles de Especificidad
1. Estilos en línea: 1000
2. Selectores de ID: 100
3. Clases, atributos, pseudo-clases: 10
4. Elementos, pseudo-elementos: 1
### Ejemplos
```css
/* 1 (elemento) */
p {
color: red;
}
/* 10 (clase) */
.highlight {
color: yellow;
}
/* 11 (elemento + clase) */
p.highlight {
color: yellow;
}
/* 100 (ID) */
#header {
color: blue;
}
/* 110 (ID + clase) */
#header.title {
color: blue;
}
/* 1000 (en línea) */
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →