Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Selectores CSS

Datos de búsqueda

Etiqueta ‘Selectores CSS’

CSS hacks: filter by selectors

Fecha de publicación: 2009/12/02

All selectors provided here are valid for CSS 2.1 unless otherwise stated.

Internet Explorer 6, Internet Explorer 7 (Non standard mode), Internet Explorer 8 (Non standard mode):

* html {}

Internet Explorer 7, Internet Explorer 8 (IE7 standard mode):

*:first-child+html {}
 * + html/*/ * /**/ body {}

Internet Explorer 8 (Ids are examples):

#ie_80 {} /* IE8 */
 #ie_80, #ie8#fix {} /* other browsers */

It’s not Internet Explorer 6:

html>body {}

It’s not Internet Explorer 6, It’s not Internet Explorer 7:

html>/**/body {}

It’s not Internet Explorer (only valid for CSS3):

:root {}

Safari 3, other Webkit browsers (only valid for CSS3):

body:not(:root:root)

It’s not Internet Explorer, It’s not Opera 9.2x or earlier:

head~body {}

It’s not Internet Explorer, It’s not Opera 9.2x or earlier (only valid for CSS3):

body:only-of-type {}

Opera between 7.2x-9.2x:

html:first-child {}

Datos del artículo:

CSS: Especificidad de los selectores (2)

Fecha de publicación: 2007/07/01

Anteriormente había hablado de la especificidad en CSS. En esta ocasión voy a tratar el tema de una forma más clara y añadir algunos detalles que se me pasaron en la ocasión anterior.

Valores a tener en cuenta: lista resumida

Se deben tener en cuenta los siguientes valores:

  • El identificador vale 100.
  • La clase vale 10.
  • El elemento vale 1.

Valores a tener en cuenta: lista completa

Elemento de selector Valor
Elemento (P, IMG, etc.) 1
Clase (valor del atributo class) 10
Identificador (valor del atributo id) 100
Atributo (elemento que contiene un atributo: a[title]). El valor especificado es el del atributo (title en el ejemplo). 10
Pseudo-clases (first-child, hover, active, visited, focus, etc.) 10
Pseudo-elementos (before, after, first-line, first-letter, etc.) 1

Referencia y enlaces relacionados

Datos del artículo:

CSS: Especificidad de los selectores

Fecha de publicación: 2007/05/03

La especificidad es muy útil para evitar el valor !important dentro de las propiedades CSS o tener que poner unas reglas forzosamente después de otras para que, de ese modo, puedan ser aplicadas.

Como calcular la especificidad de los selectores

Primer paso:

  • Contar el número de atributos ID en el selector (=a).
  • Contar el número de otros atributos y de pseudo-clases en el selector (=b).
  • Contar el número de nombres de elementos en el selector (=c).
  • Ignorar pseudo-elementos.

Segundo paso: Concatenación de los tres valores que se han obtenido (abc): si a=1 b=2 y c=0, se obtiene 120.

El ejemplo que da el W3C:

* {} /* a=0 b=0 c=0 -> specificity = 0 */

LI {} /* a=0 b=0 c=1 -> specificity = 1 */

UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */

UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */

H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */

UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */

LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */

#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */

Un ejemplo:

p => a=0 b=0 c=1 => 1
p.clase => a=0 b=1 c=1 => 11
#identificador p.clase => a=1 b=1 c=1 => 111

Y el que de el número más alto es el más específico y el que se acaba aplicando. Si dos selectores tienen la misma especificidad tiene preferencia el que esté después del otro en el archivo CSS.

Ejemplos

En este caso, al ser igual de específicos se aplica el segundo, ya que va después:

p { color: pink; }
p { color: lime; }

En este caso se aplica el primero, que es más específico:

div p { color: pink; }
p { color: lime; }

Referencias y enlaces relacionados:

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: