Desde hace rato he querido comenzar a compartir algunas notas sobre CSS, como saben el desarrollo web es un abanico bastante amplio de tecnologias y todas son importante cada cual tiene su responsabilidad en este mundillo de la web.

Este en post iniciare con algunas de las pseudo-class y pseudo-elements que existen (las mas importantes) en CSS2 y CSS3, basicamente para tener una idea de lo que podemos lograr hacer con un poco de imaginación haciendo uso de las bondades que CSS nos ofrece, demas esta decir la potencialidad que este encierra.

Pseudo-Class CSS2

La pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. Consideremos el siguiente ejemplo.

p em:first-child {
  color: red;
}
//Código HTML
 
<p>Cascading Style Sheets <em>(CSS)</em> is a style sheet language used to describe
the presentation semantics (that is, the look and formatting) of a document written in a
markup language. Its most common application is to style web pages  written in
<em>HTML</em>  and <em>XHTML</em>, but the language can also be applied
to any kind of <em>XML</em> document, including SVG and XUL.</p>

Vayamos por parte, para entender debemos interpretar el CSS definido, en el cual dado el selector p em:first-child aplique color rojo (red) a ese elemento, es decir al primer elemento que coincida, de acuerdo al HTML colocado será y el selector CSS a quien se le aplicará el color red será <em>CSS</em>

Otro truco bien interesante es colocar la primera letra de un parrafo en mayúscula.

Con el mismo código en HTML y agregando un estilo damos el efecto anterior.

p::first-letter{ font-size: 50px; font-weight: bold; float: left; padding: 5px}

pseudo-class relacionada con links (enlaces)

Solo voy a mencionar los que considero mas importantes.

  • :link se aplica a todos los enlaces que todavía no han sido visitados por el usuario.
  • :visited se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.
  • :hover (muy utilizado) se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un elemento.

Ahora con CSS3

No debe quedar duda las grandes mejoras que han incluido CSS3, veamos algunas de las pseudo-class que la revisión de CSS3 ha incorporado.

Cuantos no han intentando hacer un efecto de zebra sobre una tabla normalmente se recurria a soluciones en JavaScript o bien con otros artificios, para aliviar esta tarea en CSS3 tenemos :nth-child(N) veamos como se usa y si quieres ir mas allá puedes ver como funciona :nth-child(N).

tr:nth-child(2n+2) {background: #eee}
    <table>
        <tr><th>Header</th><th>Header</th></tr>
        <tr><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td></tr>
    </table>

Esto de first-chlid y last-child a primera vista es simple pero termina siendo bastante abstracto a medida que tenemos diseños complejos, vemos otro ejemplo tenemos una lista con <em>ul</em> deseamos que el primero hijo (first-child) y el último (last-child) no se comporten como todos deseamos colocarle un color.

1
2
3
4

ul {background: white; list-style: none outside none; padding:0px}
ul li {border-bottom: 3px solid #000; color: #000; padding: 2px}
li:last-child, li:first-child{background: #ccc}
li:last-child {border: 0px}

En la línea 1 se indica que todos los li van a tener un border-bottom.
En la línea 3 se indica que el primero y último hijo tenga un background distinto al de todos los demas.
En la línea 4 se indica que el border-bottom definido en la línea 1 quede sin efecto para el último hijo de la lista.

<ul>
	<li>asdad</li>
	<li>asdad</li>
	<li>asdad</li>
	<li>adasd</li>
	<li>adasd</li>
	<li>adasd</li>
</ul>

Con esto finalizó este post donde la idea básica fue mostrar las bondades (solo algunas) de lo que ofrece CSS pueden ver todo lo que se hizo a lo largo de este post demo , si crees que este post puede ser mejor dimelo!…

  • Share/Bookmark