Selectores CSS3

CSS3 ofrece acceso a una amplia variedad de selectores que se utilizan para identificar qué elemento para dar formato en una página. Un selector define qué Formato- el estilo define cómo dar formato a ella. Sin embargo, es fácil entrar en la sobrecarga de selector. La mayoría de los desarrolladores utilizan una combinación de selectores de etiquetas y atributos para realizar todas las tareas relacionadas con el selector. Aquí están los selectores de etiquetas de uso general, que proporcionan metodologías de selección en general.

• Tag,Tag: La separación de dos etiquetas con una coma significa seleccionar ambas etiquetas, independientemente del lugar en que aparecen en el documento. Por ejemplo, usando p, div sería seleccionar todo

  y

  etiquetas dentro del documento.

• Tag>Tag: La separación de dos etiquetas con un signo mayor que (>) Indica al navegador para seleccionar una etiqueta que tiene otra etiqueta como padre. Por ejemplo, si usted tiene

  y use div> p, el navegador seleccionará el

  etiqueta.

• Tag Tag: La separación de dos etiquetas por un espacio indica al navegador para seleccionar una etiqueta que aparece dentro de otra etiqueta. Este selector difiere del uso de un signo de mayor que en que la primera etiqueta no tiene por qué aparece directamente inmediatamente antes de la segunda etiqueta. Por ejemplo, si usted tiene

  y use div> p, el navegador no seleccione nada. Sin embargo, si utiliza div p en cambio, el navegador seleccione el

  etiqueta.

• Tag+Tag: La separación de dos etiquetas con un signo más (+) Indica al navegador para seleccionar una etiqueta que aparece inmediatamente después de otra etiqueta. Por ejemplo, si usted tiene

  y use div + p, el navegador seleccionará el

  etiqueta. Observe que el

  etiqueta no aparece dentro de la

  etiqueta, que aparece después de la
  etiqueta.

• Tag~Tag: La separación de dos etiquetas con una tilde (~) Indica al navegador para seleccionar todas las etiquetas que aparece después de otra etiqueta. Por ejemplo, si usted tiene

  y use div ~ p, el navegador seleccionará ambos

  las etiquetas. Esto difiere de div + p (cuando el navegador se selecciona sólo la primera

  etiqueta que sigue el

  etiqueta).

• : root: Selecciona el elemento raíz del documento. El elemento raíz depende del tipo de documento. Este selector se utiliza normalmente con documentos XML, pero potencialmente podría utilizarlo con cualquier tipo de documento.

Con el fin de ofrecer excelente selección de sólo los elementos adecuados, los desarrolladores suelen utilizar selectores de atributos en lugar de selectores de etiquetas. Aquí están los selectores de atributos que los desarrolladores utilizan comúnmente.

• .Nombre de clase: Selecciona todos los objetos que tienen una clase atribuir valor con el nombre dado. Por ejemplo, .StdPara seleccionaría cada objeto que tiene un class = "StdPara" atribuir sin tener en cuenta el tipo de objeto.

• #id: Selecciona todos los objetos que tienen un Identificación atribuir valor con el nombre dado. Por ejemplo, #ThirdHeader seleccionaría cada objeto que tiene un id = "ThirdHeader" atribuir sin tener en cuenta el tipo de objeto.

• : lang (Idioma Identifier): Selecciona cualquier objeto con el valor de idioma especificado. Por ejemplo, : lang (en) sería seleccionar cualquier objeto que utiliza Inglés como su idioma. Aquí está una lista de identificadores de idioma comunes.

• [Cualidad]: Selecciona todos los objetos que utilizan un atributo particular independientemente del valor del atributo. Por ejemplo, [lang] sería seleccionar todos los objetos que utilizan el lang atribuir.

• [Cualidad=Valor]: Selecciona todos los objetos que tienen un atributo con un valor particular. El valor debe coincidir exactamente. Por ejemplo, [lang = "es-ES"] seleccionaría cada objeto que tiene un atributo de idioma con un valor de Inglés.

• [Cualidad~ =Valor]: Selecciona todos los objetos que tienen un atributo que contiene un valor particular. El valor de búsqueda sólo tiene que aparecer en algún lugar dentro de valor en su conjunto. Por ejemplo, [título ~ = "Secundario"] selecciona todos los objetos con atributos de título que contienen la palabra Secundario como una palabra discreta. Este selector trabaja con palabras completas.

• [Cualidad| =Valor]: Selecciona todos los objetos que tienen un atributo que se inicia con un valor particular. El valor de búsqueda debe aparecer al principio del valor en su conjunto, pero no tiene que ser todo el valor. Por ejemplo, [título | = "Sub"] selecciona todos los objetos con atributos de título que comienzan con la palabra Sub. Este selector funciona con términos con guión.

• [Cualidad^ =Valor]: Selecciona todos los objetos que tienen un atributo que se inicia con un valor particular. Por ejemplo, [título | = "Sub"] selecciona todos los objetos con atributos de título que comienzan con la palabra Sub. Esta forma del selector es menos restrictiva que la [Atributo | = Valor] atribuir. Usando este formulario seleccionará title = "subcabecera", title = "Sub Header", o title = "Sub-Header" con la misma fiabilidad.

• [Cualidad$ =Valor]: Selecciona todos los objetos que tienen un atributo que termina con un valor particular. Por ejemplo, [título $ = "Secundario"] selecciona todos los objetos con atributos de título que terminan con la palabra Secundario. Esta forma de atributo es no restrictiva - no requiere ningún formato especial.

• [Cualidad* =Valor]: Selecciona todos los objetos que tienen un atributo que contiene un valor particular. Por ejemplo, [título $ = "Secundario"] selecciona todos los objetos con atributos de título que contienen la palabra Secundario. Esta forma del selector es menos restrictiva que la [Cualidad~ =Valor] atribuir. Usando este formulario seleccione title = "SecondaryParagraph", title = "Párrafo Secundaria", o title = "Secundario-párrafo" con la misma fiabilidad.

Un especial no() selector completa la matriz común de selectores. Para decirle al navegador no seleccionar una etiqueta o atributo en particular, sino para seleccionar todo lo demás en su lugar, se utiliza el : no () selector. Por ejemplo, : no (p) seleccionaría todo pero las etiquetas de párrafo en la página.