Selectores de elementos en CSS2.1
Desde que sale la version 2.1 de CSS tenemos nuevos criterios de selección de elementos que nos otorgan una mejor flexibilidad al momento de necesitar refereirnos a ciertos elementos de una pagina html.
Por ello que decido postear muchos de las soluciones que nacen a partir del CSS 2.1 en la siguiente tabla.
Alguna de ellas podran notar que no funcionan en IExplorer (como nos tiene ya acostumbrado).
|
Descripción de sintaxis para selector CSS 2.1 |
||
|
Selector |
Patrones |
Descripción |
|
Universal |
* |
Le corresponde a cualquier elemento |
|
Type |
E |
Le corresponde a elementos E |
|
Class |
.info |
Para cualquier elemento con atributo Class=”info” |
|
ID |
#footer |
Para cualquier elemento con atributo id=”footer” |
|
Descendant |
E F |
Para todo elemento F que se encuentre debajo de un elemento E. |
|
Child |
E > F |
Para todo elemento F hijo de un elemento E. |
|
Adjacent |
E + F |
Para todo elemento F que se encuentra inmediatamente debajo de un elemento E hermano. |
|
Attribute |
E[att] |
Para todo elemento E que contiene un atributo, sin importar su valor. |
|
Attribute |
E[att=val] |
Para todo elemento E en que el valor de su atributo att coincide con el valor asignado a su equivalente. |
|
Attribute |
E[att~=val] |
Para todo elemento E en que el valor de su atributo att coincide con el valor de palabras separadas por un espacio de su equivalente. |
|
Attribute |
E[att|=val] |
Para todo elemento E en que el valor de su atributo att coincide con lista de palabras separadas por espacio. |
|
The :first-child pseudo-class |
E:first-child |
Selector del elemento E donde E es el primer hijo del elemento que lo contiene. |
|
The link pseudo-classes |
E:link |
Enlace no visitado aun (:link) Enlace que ha sido visitado (:visited). |
|
The dynamic pseudo-classes |
E:active |
Corresponden a eventos de acción de los enlaces |
|
The :language pseudo-class |
E:lang(c) |
Selector de elementos E escritos en un lenguaje c. (el valor de "c" puede corresponder a un lenguaje. Ejemplo: lang=”ru” por Rumania, y lang=”ja” por caracteres correspondientes a Japón ) |
|
The :first-line pseudo-element |
E:first-line |
Le corresponde a la primera línea de contenido formateado del elemento E. |
|
The :first-letter pseudo-element |
E:first-letter |
Para la primer letra del elemento E. |
Si bien existen otros, estos son la mayoría de los mas utilizados por los diseñadores.
http://www.456bereastreet.com/