Selectores CSS Parte2

Selectores CSS 2 Amplíe estilos

Los selectores CSS 2 son una extensión de selectores CSS 1, pero, como era de esperar, agregan más opciones y funciones para la mezcla. Estos selectores son compatibles con los navegadores modernos, así que no hay ningún motivo para empezar a utilizarlos para hacer sus hojas de estilo más específicas y directas.

CSS 2 Selector universal

Un selector universal es exactamente lo que suena: un selector que selecciona universalmente. En otras palabras, si usa el selector universal coincidirá con el nombre de cualquier tipo de elemento en el documento. Está escrito como una estrella:

*

Usted puede utilizar el selector universal en cualquier lugar que usaría un nombre de elemento. Así, por ejemplo, si quería igualar cualquier elemento secundario en una blockquote, debería escribir:

blockquote * { … }

Selectores de atributos CSS 2

Con CSS 2 ahora puede seleccionar los elementos que tienen atributos específicos. También puede coincidir en el valor del atributo. Por ejemplo, si desea establecer un estilo en todas las etiquetas de anclaje que tienen el atributo href (y no coinciden en las etiquetas de anclaje que no lo hacen, como anclas con nombre), debería escribir:

a[href] { … }

Si quería igualar sólo en los vínculos anclas que apuntaban a un sitio específico, usted debe anotar lo siguiente. Tenga en cuenta que esto debe ser una coincidencia exacta, los enlaces que apuntaban a sub-páginas dentro del href que figuran no coinciden.

a[href="http://webdesign.about.com/"] { … }

También puede hacer búsquedas parciales en los valores de atributo:

[att~=value]
Cuando el valor del atributo es una lista separada por espacios de valores, uno de los cuales es un partido.

span[style~="boxTop"]

Encaja en <span style=”boxRed boxTop”>

[att|=value]
Cuando el valor del atributo es una lista de palabras separadas por guión, el comienzo de lo que es un partido. Esto se utiliza principalmente para que coincida con el idioma sub-códigos:

*[lang|=en]

Encaja en nosotros y en-es-es.

Nueva CSS 2 pseudo-elementos y pseudo-clases

CSS 2 trae una serie de nuevos pseudo-elementos y clases.

:first-child
El primer niño pseudo-clase coincide con el primer elemento secundario de otro elemento, no importa lo que es. Si se define con un elemento por ejemplo, p: first-child,  buscará cada <p> que es un primer hijo, e ignorará los otros.

:hover and :focus
Activa la pseudo-clase a partir de CSS 1. El pase el ratón entra en vigor cuando esté el ratón sobre el elemento en cuestión, y el foco cuando el elemento tiene el foco del navegador.

:active
Si bien esta pseudo-clase existía en CSS 1, ahora se aplica a todos los elementos, no sólo enlaces. Asimismo, ya no es mutuamente excluyente con otras pseudo-clases. Por ejemplo, un elemento puede ser a la vez :active y :visited

:lang
Esta pseudo-clase especifica cómo el lenguaje humano del elemento está determinado, por lo que puede hacer coincidir un elemento basado en su lenguaje.

:first-line
Similar a :first-child pseudo-clase, pero este pseudo-elemento se aplica a la primera línea de texto en el elemento.

:first-letter
Este pseudo-elemento le permite seleccionar la primera letra de un elemento para crear la tapa desplegable o estilos iniciales.

:before and :after
Estas te permiten insertar contenido generado en el documento antes o después del elemento en cuestión.

CSS 2 Niño y selectores de hermanos

CSS 1 le ha permitido seleccionar los elementos que eran descendientes de un elemento más, pero con CSS 2 ahora se puede especificar que sólo desea hijos directos seleccionados, o simplemente quiere elementos que son hermanos (tienen el mismo padre) el uno del otro.

Selectores Niño

Un selector de hijo se escribe con un signo de mayor que (>). Para hacer coincidir todos los elementos p que son hijos de un elemento div podría escribir:

div ] p { … }

También puede combinar selectores de hijos de los selectores de descendientes. Por ejemplo, para que coincida con todas las etiquetas p que son descendientes de un elemento de la lista de menores por órdenes de que es descendiente de un div, usted escribiría:

div ol]li p { … }

Selectores de hermanos

Los hermanos adyacentes son elementos que están uno al lado del otro y al mismo nivel en la estructura del documento. Ellos tienen el mismo padre y estaría justo al lado el uno al otro en el documento. Por ejemplo, si se desea con el estilo de todos los elementos h2 que siguen inmediatamente un elemento h1 (pero que no tienen otro elemento, como AP por medio), usted escribiría:

h1 + h2 { … }

Como con los selectores niños, usted puede combinar otros selectores. Por ejemplo, para que coincida con todos los párrafos que siguen un h2 con una clase especial, usted escribiría:

h2.special + p { … }

Usar CSS 2 selectores

Con la descripción y uso de selectores CSS 2 hará que sus hojas de estilo sean más potentes. Se puede sincronizar elementos más directos y específicos Los selectores CSS 2 son una parte importante del CSS.

Dejar un comentario

*