selectores css3

otra versión css selectors [fuente]

fin del documento

Patrón Descripción Descrito en la sección Definido por primera vez en el nivel CSS Notas

*

cualquier elemento

Universal selector

2

 

E

un elemento del typo E

Type selector

1

 

E[foo]

un elemento E con un atributo "foo"

Attribute selectors

2

 

E[foo="bar"]

un elemento E cuyo atributo "foo" es exactamente igual a "bar"

Attribute selectors

2

 

E[foo~="bar"]

un elemento E cuyo atributo "foo" es una lista de valores separados por espacios en blanco, uno de los cuales es exactamente igual a "bar"

Attribute selectors

2

 

E[foo^="bar"]

un elemento E cuyo atributo "foo" empieza exactamente con la cadena "bar"

Attribute selectors

3

 

E[foo$="bar"]

un elemento E cuyo atributo "foo" acaba exactamente con la cadena "bar"

Attribute selectors

3

 

E[foo*="bar"]

un elemento E cuyo atributo "foo" contiene la cadena "bar"

Attribute selectors

3

 

E[foo|="en"]

un elemento E cuyo atributo "foo" tiene una lista de valores separados por guión y el primero (desde la izquierda) es "en"

Attribute selectors

2

 

E:root

un elemento E, root of the document

Structural pseudo-classes

3

...ni idea...

E:nth-child(n)

un elemento E, que está en la posición n respecto de su contenedor (padre)

Structural pseudo-classes

3

IE 8 no

E:nth-last-child(n)

un elemento E, que está en la posición n respecto de su contenedor, contando desde el último

Structural pseudo-classes

3

no coge la primera desde abajo, coge el contenedor padre

IE 8 no

E:nth-of-type(n)

un elemento E, que está en la posición n y está al mismo nivel (hermano)

Structural pseudo-classes

3

IE 8 no

E:nth-last-of-type(n)

un elemento E,que está en la posición n, contando desde atrás y está al mismo nivel

Structural pseudo-classes

3

IE 8 no

E:first-child

un elemento E, primer elemento (hijo) de su contenedor (padre)

Structural pseudo-classes

2

 

E:last-child

un elemento E, último elemento (hijo) de su contenedor (padre)

Structural pseudo-classes

3

IE 8 no

E:first-of-type

un elemento E, cada uno de los primeros elementos de este tipo

Structural pseudo-classes

3

IE 8 no

E:last-of-type

un elemento E, cada uno de los elementos de este tipo, empezando desde atrás

Structural pseudo-classes

3

IE 8 no

E:only-child

un elemento E, solo el primer contenido (hijo) de su contenedor (padre)

Structural pseudo-classes

3

usado en ul

IE 8 no

E:only-of-type

un elemento E, el único hermano de este tipo (hijo único)

Structural pseudo-classes

3

usado en input

IE 8 no

E:empty

un elemento E que no contiene (sin hijos, incluyendo nodos de texto)

Structural pseudo-classes

3

IE 8 no

E:link
E:visited

un elemento E que es el origen del enlace cuyo destino no se ha visitado todavía (:link) o ya se ha visitado (:visited)

The link pseudo-classes

1

 

E:active
E:hover
E:focus

un elemento E ante ciertas acciones del usuario

The user action pseudo-classes

1 and 2

 

E:target

an E element being the target of the referring URI

The target pseudo-class

3

una vez se llega al target, se aplica donde está el "<a name..."

E:lang(fr)

an element of type E in language "fr" (the document language specifies how language is determined)

The :lang() pseudo-class

2

ojo al idioma establecido en el html

E:enabled
E:disabled

un elemento E de interface de usuario que tiene la propiedad enabled o disabled

The UI element states pseudo-classes

3

usado en input

E:checked

a user interface element E which is checked (for instance a radio-button or checkbox)

The UI element states pseudo-classes

3

 

E::first-line

la primera línea de un elemento E

The ::first-line pseudo-element

1

 

E::first-letter

la primera letra de un elemento E

The ::first-letter pseudo-element

1

 

E::before

contenido generado antes de un elemento E

The ::before pseudo-element

2

 

E::after

contenido generado después de un elemento E

The ::after pseudo-element

2

 

E.xxx

un elemento E cuyo valor class es "xxx".

Class selectors

1

 

E#zzz

elemento E con ID igual a "zzz".

ID selectors

1

 

E:not(s)

elemento E que no se corresponde con el selector s

Negation pseudo-class

3

usado en input que no sean type="text"

IE 8 no

E F

un elemento F descendiente de un elemento E

Descendant combinator

1

 

E > F

un elemento F hijo de un elemento E

Child combinator

2

 

E + F

un elemento F immediatamente precedido por un elemento E

Adjacent sibling combinator

2

 

E ~ F

un elemento F precedido por un elemento E

General sibling combinator

3

 

los elementos de la tabla anterior que aparecen resaltados, tienen su ejemplo en el texto siguiente...

Esta es la hoja de estilos empleada

Ejemplos:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae quam dui, eu semper velit. Suspendisse potenti. Attribute selectors. Aenean nibh erat, pulvinar non gravida nec, pellentesque non sapien. Nunc consectetur luctus posuere. Quisque non lectus vitae eros porta dictum. Aliquam porttitor metus eget purus luctus molestie. Vestibulum tortor dui, venenatis quis varius in, mattis sed velit. Sed suscipit facilisis suscipit. Curabitur non dolor velit, et scelerisque neque. Ut et leo arcu, vitae semper dui. Donec posuere volutpat ligula ullamcorper lacinia. Etiam vestibulum arcu ac mauris placerat vel gravida enim fringilla. Pellentesque facilisis semper pharetra. Donec eu orci orci.

-párrafo en la que contiene-

-primera contenida- Etiam pellentesque nunc non mauris porttitor facilisis. In vel neque elit, sed porta nisi. Morbi consectetur rutrum sagittis. Curabitur non lorem in libero pellentesque pharetra aliquam nec nisl. Quisque ac nunc elit, a aliquet elit. Sed ante massa, luctus ac consectetur et, bibendum sit amet elit. Phasellus commodo ultricies nibh sed feugiat. Fusce auctor malesuada nunc vel tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id odio at odio porttitor tristique et vel tortor. Aenean in est arcu. Ut non ante ante, vel porttitor felis. Vestibulum scelerisque mattis turpis quis faucibus. Maecenas cursus tempus faucibus. Proin non purus vitae nunc laoreet sagittis vitae quis felis. Pellentesque sit amet lacus nisl, quis posuere ligula.

-segunda contenida- Cras eget tortor ante, sit amet faucibus est. Aenean lobortis rhoncus odio, a tempus odio vulputate et. Fusce sagittis rhoncus leo, in laoreet risus lacinia sed. Proin tempus lobortis nisi, et imperdiet magna vulputate quis. Nullam non tincidunt augue. Vestibulum vel lobortis tortor. Proin dapibus ornare nibh, sed pellentesque orci mattis id. Nullam lacinia iaculis nibh eu dignissim. Donec at aliquam nisi. Vivamus et odio tortor, eget placerat leo. Maecenas ut ligula ipsum, sed consectetur lorem. Phasellus non erat in purus dapibus congue. Pellentesque convallis velit eu ipsum egestas gravida. Aliquam rhoncus aliquet faucibus. Nam lacus leo, elementum quis rhoncus vitae, bibendum eu dolor.

-tercera contenida- Proin ut molestie tortor. In gravida, enim quis laoreet dictum, metus augue laoreet mauris, et faucibus neque dui nec libero. Phasellus sit amet elementum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies arcu ut metus interdum porta. Fusce imperdiet ullamcorper justo eget egestas. Sed pretium urna ut est convallis pellentesque. Morbi sodales, nisl in iaculis tempor, elit elit fringilla sem, ut posuere dui tortor vitae turpis. Aliquam laoreet purus sed arcu luctus sagittis semper nisl fringilla. Cras varius mi sed mauris suscipit suscipit. Nulla iaculis tempus ante at tristique. Maecenas vel eros vel est blandit adipiscing.

-cuarta contenida- Praesent ante metus, venenatis et semper quis, accumsan at leo. Aenean magna nisl, mattis in aliquam sit amet, lobortis in dolor.

Etiam non imperdiet lectus. Maecenas sem diam, sodales et lacinia sed, volutpat sed justo.

Maecenas nisl justo, tincidunt sit amet tincidunt et, placerat dictum risus. Nulla suscipit nunc vel mi vestibulum porttitor vitae non lacus. Aliquam venenatis augue sed dui eleifend sodales. Vestibulum odio augue, bibendum id adipiscing quis, porttitor sit amet quam.

Nam sapien nibh, vehicula nec hendrerit varius, ultricies nec risus.

Phasellus vitae turpis tellus, sit amet feugiat lacus. Proin nisl dui, vehicula vitae interdum sed, laoreet eget arcu. Mauris fringilla libero bibendum nisi malesuada eleifend. Proin gravida, tellus ut tincidunt luctus, arcu velit ultrices magna, elementum euismod magna dolor ut ligula. Praesent molestie sollicitudin placerat.

listado de caracteres unicode

Curabitur non dolor velit, et scelerisque neque. Ut et leo arcu, vitae semper dui. Donec posuere volutpat ligula ullamcorper lacinia. Etiam vestibulum arcu ac mauris placerat vel gravida enim fringilla. Pellentesque facilisis semper pharetra. Donec eu orci orci.

enlazando a ninguna parte

enlazando a ninguna parte

información en inglés

 

Como cambiar el color del enlace si no pertenece al dominio:

a {color: blue; }

a:not([href^=http://mydomain]) { color: red; }

fin del documento

home