Selector universal
* { color:red; }
Ejemplo:
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
Resultado:
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Selector de etiqueta
h1 { color:red; }
Ejemplo:
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet...</p>
</body>
Resultado:
Titulo
Lorem ipsum dolor sit amet…
Selector descendente
body p { color:red; }
Ejemplo:
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet...</p>
</body>
Resultado:
Titulo
Lorem ipsum dolor sit amet…
Selector de clase
.parrafo { color:red; }
Ejemplo:
<body>
<h1>Titulo</h1>
<p class="parrafo">Lorem ipsum dolor sit amet...</p>
<p class="parrafo">Lorem ipsum dolor sit amet...</p>
</body>
Resultado:
Titulo
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Selector de identificación
#primer_parrafo { color:red; }
Ejemplo:
<body>
<h1>Titulo</h1>
<p id="primer_parrafo">Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</body>
Resultado:
Titulo
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Selectores combinados
h1, #primer_parrafo { color:red; }
Ejemplo:
<body>
<h1>Titulo</h1>
<p id="primer_parrafo">Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</body>
Resultado:
Titulo
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Selectores de hijos
body > p { color:red; }
Ejemplo:
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
Resultado:
Titulo
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
Selector adyacente
h1 + h2 { color: red }
Ejemplo:
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
<h2>Otro subtítulo</h2>
</body>
Resultado:
Titulo1
Subtítulo
Otro subtítulo
Selector de atributos
[attr] { color: red }
[attr=val] { color: blue }
[attr^=ho] { color: yellow }
[attr$=au] { color: green }
Ejemplo:
<body>
<h1 attr>Titulo1</h1>
<h2 attr="val">Titulo2</h2>
<h3 attr="hola">Titulo3</h3>
<h4 attr="chau">Titulo4</h4>
</body>
Resultado:
Titulo1
Titulo2
Titulo3
Titulo4
Pseudo-clases
Ejemplo:
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</body>
li:first-child { color: red;}
li:last-child { color:blue }
Resultado:
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
li:nth-child(2n+1) { color:red }
li:nth-child(2n) { color:blue }
Resultado:
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
Otras pseudo-clases:
a:hover { ... } /* se activa cuando el usuario pasa el ratón por encima de un elemento */
a:active { ... } /* se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento */
a:focus { ... } /* se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado */
a:visited { ... } /* selecciona cualquier <a> que ha sido visitado*/
Pseudo-elementos
h1::before { content: "Otra titulo "; }
h2:after { content: "..."; }
h3::first-letter { color:red }
p::first-line { color: red}
Ejemplo:
<body>
<h1>Titulo1</h1>
<h2>Titulo2</h2>
<h3>Titulo3</h3>
<h4>Titulo4</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, alias ex vero placeat odit similique dolor neque sapiente amet rerum quia enim? Quaerat reiciendis iste earum commodi recusandae? Facilis, numquam!</p>
</body>
Otra titulo Titulo1
Titulo2…
Titulo3
Titulo4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, alias ex vero placeat odit similique dolor neque sapiente amet rerum quia enim? Quaerat reiciendis iste earum commodi recusandae? Facilis, numquam!
Comments
comments powered by Disqus