Principiantecss
Selectores CSS
Domina los selectores basicos, combinadores, pseudo-clases y pseudo-elementos de CSS.
Selectores basicos
Los selectores determinan a que elementos se aplican las reglas de estilo. Los tres basicos son: elemento, clase (
.) e ID (#).Selectores y combinadores
Los combinadores permiten seleccionar elementos en base a su relacion con otros elementos del DOM.
css
1/* Selector de elemento */
2h1 { color: navy; }
3
4/* Selector de clase */
5.card { padding: 1rem; border-radius: 8px; }
6
7/* Selector de ID */
8#hero { background: linear-gradient(135deg, #667eea, #764ba2); }
9
10/* Descendiente (cualquier nivel) */
11.nav a { text-decoration: none; }
12
13/* Hijo directo */
14.menu > li { list-style: none; }
15
16/* Hermano adyacente */
17h2 + p { margin-top: 0; }
18
19/* Selector de atributo */
20input[type="email"] { border-color: blue; }Pseudo-clases y pseudo-elementos
Las pseudo-clases seleccionan estados (
:hover, :focus). Los pseudo-elementos seleccionan partes virtuales (::before, ::after).css
1/* Pseudo-clases */
2a:hover { color: #3b82f6; }
3input:focus { outline: 2px solid #3b82f6; }
4li:nth-child(odd) { background: #f9fafb; }
5li:first-child { font-weight: bold; }
6
7/* Pseudo-elementos */
8.quote::before {
9 content: open-quote;
10 font-size: 2rem;
11 color: #9ca3af;
12}
13
14.link::after {
15 content: " (externo)";
16 font-size: 0.75rem;
17 color: #6b7280;
18}