Selectores css3
CSS3 ofrece acceso a una amplia variedad de selectores que se utilizan para identificar qué elemento para formatear en una página. Un selector define qué Format- el estilo define cómo dar formato a él. Sin embargo, es fácil entrar en la sobrecarga de selección. La mayoría de los desarrolladores utilizan una combinación de etiquetas y atributos selectores para realizar todas las tareas relacionado con el selector. Estos son los selectores de etiquetas comúnmente utilizadas, que proporcionan metodologías generales de selección.
Etiqueta,Etiqueta: Que separa dos etiquetas con una coma significa seleccionar ambas etiquetas, independientemente del lugar en que aparecen en el documento. Por ejemplo, usando p, div seleccionaría todos
y las etiquetas dentro del documento.
Etiquetagt;Etiqueta: Que separa dos etiquetas con un signo mayor que (gt;) Indica al navegador para seleccionar una etiqueta que tiene otra etiqueta como padre. Por ejemplo, si usted tiene
Video: CSS: selectores avanzados
y use divgt; p, el navegador seleccionará eletiqueta.
Video: Curso Basico de CSS - 2. Selectores
EtiquetaEtiqueta: La separación de dos etiquetas por un espacio le dice al navegador para seleccionar una etiqueta que aparece dentro de otra etiqueta. Este selector se diferencia del uso de un signo mayor que en los que la primera etiqueta no tiene por qué aparece directamente inmediatamente antes de la segunda etiqueta. Por ejemplo, si usted tiene
y use divgt; p, el navegador no seleccione nada. Sin embargo, si utiliza div p en cambio, el navegador va a seleccionar eletiqueta.
Etiqueta+Etiqueta: Que separa 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á eletiqueta. Observe que el
etiqueta no aparece dentro de la etiqueta, que aparece después de la etiqueta.
Etiqueta~Etiqueta: Que separa dos etiquetas con una tilde (~) Indica al navegador para seleccionar cada etiqueta que aparece después de otra etiqueta. Por ejemplo, si usted tiene
y use div ~ p, el navegador seleccionará tantolas etiquetas. Esto difiere de div + p (Donde el navegador se selecciona sólo la primera
etiqueta que sigue a la etiqueta).
:raíz: 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 que potencialmente podría utilizar con cualquier tipo de documento.
Con el fin de proporcionar excelente selección de sólo los elementos adecuados, los desarrolladores suelen utilizar selectores de atributos en lugar de los selectores de etiquetas. Aquí están los selectores de atributos que los desarrolladores utilizan comúnmente.
.Nombre de la clase: Selecciona todos los objetos que tienen una clase el valor de atributo con el nombre dado. Por ejemplo, .StdPara seleccionaría los objetos que tengan una class =”StdPara” atribuir sin tener en cuenta el tipo de objeto.
#Carné de identidad: Selecciona todos los objetos que tienen una carné de identidad el valor de atributo con el nombre dado. Por ejemplo, #ThirdHeader seleccionaría los objetos que tengan una id =”ThirdHeader” atribuir sin tener en cuenta el tipo de objeto.
Video: Tutoriales HTML5 + CSS3 - 07 Selectores CSS3 class - id
: Lang (identificador de idioma): Selecciona cualquier objeto con el valor de idioma especificado. Por ejemplo, : Lang (en) seleccionaría cualquier objeto que utiliza Inglés como su idioma. Aquí está una lista de identificadores de idioma común.
[Atributo]: Selecciona todos los objetos que utilizan un atributo particular, independientemente del valor del atributo. Por ejemplo, [Lang] seleccionaría todos los objetos que utilizan el lang atributo.
[Atributo=Valor]: Selecciona todos los objetos que tienen un atributo con un valor particular. El valor debe coincidir con precisión. Por ejemplo, [Lang =”en-us”] seleccionaría los objetos que tengan un atributo de idioma con un valor de Inglés.
[Atributo~ =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 del 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.
[Atributo| =Valor]: Selecciona todos los objetos que tienen un atributo que comienza con un valor particular. El valor de búsqueda debe aparecer al principio del valor en su conjunto, pero no tiene por qué ser el valor completo. 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 guiones.
[Atributo^ =Valor]: Selecciona todos los objetos que tienen un atributo que comienza 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 de la selector es menos restrictivo que el [Atributo | = Valor] atributo. Usando esta forma seleccionará title =”sub-cabecera”, title =”Sub Header”, o título =”subtítulo” con la misma fiabilidad.
[Atributo$ =Valor]: Selecciona todos los objetos que tienen un atributo que termina con un valor particular. Por ejemplo, [Título de $ =”secundario”] selecciona todos los objetos con atributos de título que terminan con la palabra Secundario. Esta forma del atributo es no restrictiva - no requiere ningún formato especial.
[Atributo* =Valor]: Selecciona todos los objetos que tienen un atributo que contiene un valor particular. Por ejemplo, [Título de $ =”secundario”] selecciona todos los objetos con atributos de título que contienen la palabra Secundario. Esta forma de la selector es menos restrictivo que el [Atributo~ =Valor] atributo. Usando este formulario seleccione title =”SecondaryParagraph”, title =”Párrafo Secundaria”, o title =”Secundario-apartado” 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.