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.

Los fundamentos del CSS Selectores 1

Básico 1 CSS Selectores

El selector es la parte de la definición de estilo CSS que define los elementos exactos para aplicar el estilo. En su forma más básica, este es el nombre del elemento real. Por ejemplo, si se desea un estilo de todos sus títulos de primer nivel en rojo, se utiliza un selector h1:

h1 { color: red; }

CSS Selectores de Clase 1

En el caso de que no quería definir cada título de primer nivel en rojo, pero si un sólo  sub-conjunto, puede utilizar un selector de clase (escrito como una cadena con un punto delante de él). Por ejemplo, si desea que el mismo h1 forme parte de un sub-conjunto de H1S rojo, y el resto permanezca como normal, se utiliza un selector de clase:

h1.red { color: red; }

CSS Selectores de ID 1

Los selectores ID son casi los mismos que los selectores de clase, sólo que son más que un impacto de un elemento en la página (el que tiene identificador específico), y están escritos con el signo (#) en la parte delantera de la palabra. Por ejemplo, si usted tuviera un ID de h1 que quisiera rojo:

#myredh1 { color: red; }

CSS 1 Pseudo-clases

En CSS 1 hay un par de pseudo-clases útiles que ayudan a definir los estilos basados en las características del elemento o una página y no específicamente a los propios elementos. Hay cinco pseudo-clases en CSS 1:

a: link
Define un enlace no visitado.

a: visited
Define un vínculo visitado.

a: active
Define un vínculo activo.

: first-line
Define la primera línea de como es el formato en el lienzo.

: first-letter
Define la primera letra del texto en el elemento. Técnicamente es un pseudo-elemento.

Selectores CSS 1 descendiente o selectores contextuales

Los Selectores CSS 1 también le permiten definir un selector de base en el lugar que está en el árbol HTML. Por ejemplo, aunque es posible que desee hacer todos los h1 rojos en su documento (utilizando los selectores de base anterior), es posible que desee llamar más la atención sobre cualquier subrayado (texto <em> </ em>) dentro de ese h1. Mientras que usted podría establecer otra clase que em, es más fácil establecer sólo un estilo especial en todo el texto que se inscribe en un h1. Use espacios para separar las etiquetas, en lugar de comas, para indicar selectores de descendientes:

h1 { color: red; }
h1 em { text-decoration: underline; }

También puede utilizar comodines para definir cualquier número de niveles en los selectores de su descendiente. Por ejemplo, si quisiera que todas las etiquetas fueran nietos de un div, usted escribiría:

div * q { border: thin solid blue; }

Este estilo no afectará a los que de que son descendientes directos de un div o los que no están dentro de un div en absoluto.