CSSSelectores


Introducción

Los selectores CSS identifican elementos HTML específicos como objetivos para los estilos CSS. Este tema trata sobre cómo los selectores de CSS tienen como objetivo los elementos HTML. Los selectores utilizan una amplia gama de más de 50 métodos de selección ofrecidos por el lenguaje CSS, incluidos elementos, clases, ID, pseudo-elementos y pseudo-clases, y patrones.

Sintaxis

  • # id
  • . nombre de la clase
  • : nombre de pseudo-clase
  • :: nombre de pseudo-elemento
  • [ attr ] / * tiene el atributo attr . * /
  • [ attr = " valor "] / * tiene el atributo attr , y su valor es exactamente " valor ". * /
  • [ attr ~ = " valor "] / * tiene el atributo attr , y su valor, cuando se divide en espacios en blanco , contiene " valor ". * /
  • [ attr | = " valor "] / * tiene el atributo attr , y su valor es exactamente " valor ", o su valor comienza con " valor - ". * /
  • [ attr ^ = " valor "] / * tiene el atributo attr , y su valor comienza con " valor ". * /
  • [ attr $ = " valor "] / * tiene el atributo attr , y su valor termina con " valor ". * /
  • [ attr * = " value "] / * tiene el atributo attr , y su valor contiene " value ". * /
  • nombre-elemento
  • *

Observaciones

  • Usted verá a veces dos puntos dobles ( :: ) en lugar de sólo uno ( : ). Esta es una manera de separar las pseudo-clases de los pseudo-elementos .
  • Navegadores antiguos, como Internet Explorer 8, sólo admiten un único dos puntos ( : ) para la definición de pseudo-elementos.
  • A diferencia de las pseudo-clases, solo se puede usar un pseudo-elemento por selector, si está presente, debe aparecer después de la secuencia de selectores simples que representan a los sujetos del selector (una versión futura de la especificación W3C puede permitir múltiples pseudo-elementos por selector) ).

Selectores Ejemplos relacionados