Valor entre corchetes css3. CSS: Pseudoelementos y selectores de atributos. Selectores CSS3 y pseudoclases.

3. Uno de varios valores de atributos.

Algunos valores de atributos pueden estar separados por espacios, como los nombres de clases. Para establecer una regla de estilo cuando el valor requerido está presente en la lista de valores de atributos, use el siguiente selector:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

El estilo se aplica si el atributo tiene el valor requerido o es parte de una lista de valores separados por espacios. Por ejemplo:

{
color rojo;
tamaño de fuente: 150%;
}
...

Nuestro teléfono: 777-77-77

Nuestra dirección: Calle Moscú. Soviética 5

Obtendrá el siguiente resultado:

La regla se aplica a un elemento cuyos valores de atributos incluyen: clase hay un significado teléfono.

4. Guión en el valor del atributo

Se permite un guión en los valores de identificador y clase. Para vincular un estilo a elementos cuyos valores de atributos pueden contener un guión, puede utilizar la siguiente construcción:

[atributo|="valor"] (estilo)
Selector[atributo|="valor"] (estilo)

El estilo se aplica a aquellos elementos cuyo valor de atributo comienza con el valor especificado seguido de un guión. Por ejemplo:

{
color rojo;
tamaño de fuente: 150%;
}
...

• Párrafo 1


• Punto 2


• Punto 3


• Punto 4

Resultado:

En el ejemplo, la regla de estilo se aplica solo a aquellos elementos de la lista cuyo nombre de clase comienza con valor "menú- „.

5. El valor del atributo comienza con un texto específico.

Este selector establece el estilo de un elemento si el valor del atributo de etiqueta comienza con un valor específico. Puede haber dos opciones:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

En el primer caso estilo se aplica a todos los elementos cuyas etiquetas tienen un atributo con el especificado nombre y un valor que comienza con el especificado subcadenas. En el segundo caso, lo mismo, sólo que a ciertos elementos especificados en selector principal. Ejemplo:

a(
color verde;
peso de fuente: negrita;
}
...

Resultado:

El ejemplo muestra cómo mostrar enlaces externos y enlaces internos de manera diferente. Los enlaces externos siempre comienzan con la cadena "http://". Por tanto, en el selector indicamos que el estilo se aplicará sólo a los enlaces que tengan el atributo href comienza con significado http://.

6. El valor del atributo termina con cierto texto.

Vincula un estilo a elementos cuyo valor de atributo termina con el texto especificado. Tiene la siguiente sintaxis:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

En el primer caso estilo se aplica a todos los elementos que tienen atributo con lo especificado nombre y tiene un significado que termina con lo especificado subcadena. En el segundo caso lo mismo, solo que a lo indicado. selectores. De este modo se pueden representar de forma diferente, por ejemplo, diferentes formatos de imágenes gráficas. Por ejemplo:

IMG (
borde: 5px rojo sólido;
}
...

Imagen GIF

Formato de imagen png

Resultado:

En el ejemplo, todas las imágenes con extensión gif se mostrarán con un borde rojo de cinco píxeles de grosor.

7. El valor del atributo contiene la cadena especificada.

Este selector vincula un estilo a etiquetas cuyo valor de atributo contiene texto específico. Sintaxis:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Estilo se une a elementos que tienen atributo con el nombre especificado y su valor contiene el especificado subcadena. Por ejemplo:

IMG (
borde: 5px rojo sólido;
}
...

Imagen de la carpeta de la galería.

Imagen de otra carpeta

Resultado:

En el ejemplo, el estilo se aplica a las imágenes que se cargan desde la carpeta. "galería".

Se trata de selectores de atributos. Todos los métodos anteriores se pueden combinar entre sí:

Selector[atributo1="valor1"][atributo2="valor2"] (estilo)

Además, déjame recordarte acerca de los selectores CSS especiales:

• utilizando los símbolos “+” y “~” se forman;
• el símbolo ">" vincula los estilos CSS a subsidiarias etiquetas;
• símbolo<пробел>genera selectores de contexto.

En artículos futuros, también veremos pseudoelementos y pseudoclases, que proporcionan potentes herramientas de gestión de estilos.

Eso es todo, nos vemos de nuevo.

¡Hola queridos lectores! En la publicación de hoy continuaremos estudiando los conceptos básicos de CSS y les ofreceré una descripción. diferentes variaciones de selectores de atributos, y los cálculos teóricos pueden respaldarse con acciones prácticas, utilizando las herramientas integradas de todos los navegadores populares ( - sobre el concepto de navegador y la comparación de los mejores navegadores web), por ejemplo, sobre lo que escribí en detalle.

En primer lugar, quiero pedirles disculpas, queridos lectores, por mi larga ausencia, pero hay razones para ello. En primer lugar, estuve ocupado con varios proyectos a la vez durante bastante tiempo, lo que me llevó mucho tiempo. En segundo lugar, trabajé fructíferamente para mejorar la usabilidad (sobre la usabilidad en detalle y en detalle) del blog, optimicé las imágenes al máximo, mejoré su calidad y al mismo tiempo reduje significativamente su peso, lo que sin duda debería afectar la promoción de el recurso en el futuro de la manera más positiva y, en general, ya afecta.

Se hicieron muchas cosas útiles; definitivamente les contaré en detalle todos los pasos que tomé en futuras publicaciones. Bueno, y en tercer lugar, recibí una carga positiva al comunicarme estrechamente con amigos y familiares durante las vacaciones de Navidad y Año Nuevo. Por cierto, ¡me gustaría aprovechar esta oportunidad para desear a todos los lectores del blog salud, éxito, amor y bienestar familiar en el Año Nuevo! Estos deseos nunca llegan tarde si vienen del corazón.

Y ahora paso lentamente directamente al tema de la publicación de hoy. Permítanme recordarles que ya lo hemos considerado. Hoy continuaremos estudiando esta parte importante del curso Hojas de estilo en cascada (CSS) y Conozcamos los selectores de atributos y sus diversas variaciones..

Antes de comenzar a presentar el material, me gustaría recordarles una vez más que los temas y el alcance de los artículos los he elaborado con mucho cuidado y están dirigidos principalmente a principiantes. Pero no descarto que los webmasters experimentados también encuentren algo útil para ellos. Por tanto, aquellos que en el futuro quieran ahorrar dinero y tiempo a la hora de editar o incluso crear su sitio web desde cero no deben dejar de estudiar los estilos CSS en ningún caso, sobre todo porque intento presentar los materiales de forma clara, accesible y, además, tan compacta. .

Espero que me hayas perdonado por esta pequeña digresión; fue importante y completamente apropiada, de ello estoy seguro. Ahora vuelvo a nuestras ovejas, es decir, a los selectores de atributos, cuyas numerosas variaciones presentaré en detalle a continuación. Sin embargo, primero debes hacer algunos preparativos, ya que la lección será voluminosa y, lo más importante, inmediatamente después de cada punto de la teoría podrás probar todo en la práctica a lo largo del artículo. ¿Intrigado?

De hecho, es simple. El desarrollo moderno de las tecnologías web permite hacer estas cosas de forma fácil y sencilla. Me refiero a usar una herramienta como Firebug para Firefox, que mencioné al principio de la publicación. Sin embargo, ya he escrito sobre esto con suficiente detalle, por lo que en este artículo usaré una herramienta similar para otro navegador popular, Google Chrome (más sobre esto).

Esta herramienta ya está integrada de forma nativa en las últimas versiones de Chrome. Por cierto, todos los navegadores más populares tienen extensiones integradas similares, incluido Opera (como). Entonces, primero, abra cualquier página de cualquier recurso (puede tener su propio sitio web) en Google Chrome (preferiblemente la última versión).

Seleccionamos algún elemento de la página web (por ejemplo, seleccionaré uno de los párrafos del artículo de hoy) y hacemos clic derecho. En el menú contextual, seleccione "Ver código de elemento" (una alternativa es simplemente presionar la tecla F12 en su teclado). Aparecerá una ventana similar a la ventana de Firebug en la parte inferior, con estilos CSS a la izquierda y estilos CSS a la derecha.

En mi opinión, el ejemplo más obvio para trabajar con selectores de atributos con diferentes variaciones es el atributo de título (que no debe confundirse con la etiqueta de título), que define el contenido. información sobre herramientas. Si lees, imagina el papel de la etiqueta. div, que es el principal material de construcción de los sitios web modernos.

Si lo deseas, puedes abrir los divs uno por uno haciendo clic en el icono triangular negro a la izquierda hasta llegar a las etiquetas. pag, cuyo contenido se muestra en la página en forma de texto dividido en párrafos (o párrafos, que es lo mismo).

Aparecerá un espacio rodeado por un marco dentro del cual podrás editar, es decir, eliminar, cambiar o agregar texto:

En esta ventana de edición, componeremos tres párrafos aplicando el atributo de título a la etiqueta p, lo que activa una información sobre herramientas. Por ejemplo, así:

1. Un párrafo (o un párrafo, que es lo mismo, te lo recuerdo) que describa el plazo de actualización de WordPress:

2. Párrafo que brinda información sobre extensiones (complementos):

3. Párrafo sobre la larga ausencia de actualizaciones de complementos:

Entonces, ingresamos los tres párrafos en el campo de edición en la ventana de la herramienta de desarrollador. Para aprobar los cambios realizados, simplemente haga clic izquierdo y el texto de los tres párrafos aparecerá en la página web exactamente donde debería estar.

Como puede ver, el texto de la información sobre herramientas es estrictamente idéntico al valor del atributo de título (para cada párrafo este valor es diferente). Se ha creado el marco HTML para nuestros experimentos, ahora pasemos directamente a cómo cambiar su apariencia usando propiedades CSS.

Selector de atributos simple y selector de atributos con valor.

Un selector de atributos simple establece el estilo de un elemento si se le da un atributo específico a alguna etiqueta (para nuestro ejemplo, esto es etiqueta p Y Título Atributo), y el valor del atributo en este caso particular no es importante. La sintaxis CSS se verá así:

El nombre del atributo está entre corchetes y no se permite un espacio entre el nombre del selector y el atributo. El diagrama anterior muestra dos casos de uso: con y sin especificar el nombre del selector.

• En el primer caso, el estilo CSS dado se aplica a todas las etiquetas que coinciden con el atributo dado;
• En el segundo caso, el estilo se aplicará sólo a determinadas etiquetas.

Como puedes imaginar, las propiedades CSS para cada elemento, incluida la etiqueta del párrafo p, se configuran en el documento style.css. Permítanme recordarles una vez más que para consolidar prácticamente la teoría, utilizamos una excelente herramienta de edición de html y CSS, donde agregamos tres párrafos en el lado izquierdo de la ventana, cada uno con su propio valor de título.

Realizamos cambios en los códigos html y CSS "sobre la marcha" en cualquier página de absolutamente cualquier recurso (puede utilizar una de las páginas de mi blog, si le resulta más conveniente). La ventaja de este tipo de herramientas, que tienen todos los navegadores populares, es que incluso una persona que no tiene su propio sitio web puede experimentar y adquirir la práctica necesaria.

Entonces, después de agregar párrafos, su texto debería aparecer en la página web (simplemente no recargue la página durante la lección práctica, de lo contrario los resultados de los cambios que realizó desaparecerán). A continuación, debe escribir una regla CSS para un selector simple. Para hacer esto, en el lado derecho de la herramienta para webmasters, haga clic en el enlace que conduce a un documento con estilos CSS (por ejemplo, el archivo style.css):

Escribamos una regla CSS para un selector de atributos simple. de la siguiente manera:

PAG (color: verde; )

Agreguémoslo justo al final del archivo style.css en la ventana de edición de la herramienta de desarrollo:

Después de dicha edición, el texto de todos los párrafos será verde, ya que cada uno de ellos tiene un atributo de título que genera información sobre herramientas.

Como ya se mencionó, el valor del título no es importante en este caso, ya que no está marcado en la regla CSS. Más. Ahora aplica el selector de atributos con el valor. y veamos cómo cambia el texto de los tres párrafos experimentales. La sintaxis para escribir una regla CSS en este caso será la siguiente:

Para hacer esto, agregue un valor al título:

PAG (color: verde; )

Inmediatamente el primero de los párrafos probados se volverá verde, el resto permanecerá sin cambios, es decir. Se conservan las propiedades CSS del párrafo estándar de este recurso:

A continuación veremos varias opciones más para usar el selector de atributos.

Un selector de atributos con un valor que contiene el texto especificado y uno de varios valores de atributos.

Puede suceder que sea necesario aplicar estilos CSS a una etiqueta con un determinado atributo cuyo valor contenga algo de texto, una sola palabra o incluso parte de una palabra. En este caso, la sintaxis para escribir una regla CSS será la siguiente:

El operador "*" significa que si el valor del atributo contiene una determinada palabra o parte de ella, y no importa en absoluto en qué lugar (al principio, en el medio o al final), entonces esta regla de estilo se aplicará a la etiqueta con este atributo. Sigamos con la investigación práctica. Permítanme recordarles el contenido de los tres párrafos y el significado del título de cada uno de ellos:

La nueva versión de WordPress se lanzará a más tardar en abril de 2013.

El complemento WordPress One Seo Pack ha adquirido funciones adicionales, que se pueden encontrar en el sitio web oficial.

El complemento WP Tuner no se ha actualizado durante más de un año, por lo que su uso continuo es inapropiado.

Creemos una regla de estilo de acuerdo con la sintaxis presentada anteriormente (puedes reemplazar con ella lo que estaba escrito anteriormente allí, en la parte izquierda de la ventana de la herramienta que estamos usando:

PAG (color: verde; )

Inmediatamente después de editar, puede ver que el texto de todos los párrafos se volverá verde, ya que el valor del atributo de título de cada uno de ellos contiene "Word" como parte de la palabra "Wordpress".

A veces sucede que se especifican varios valores de atributos, separados por un espacio. Esto se aplica a absolutamente cualquier etiqueta, por ejemplo, contenedor div, que puede contener varias clases (class) con diferentes valores, que en este caso son atributos.

Pero seguiremos viendo el ejemplo con la etiqueta p y el atributo title, ya que es el más visual, sobre todo para principiantes. Además, al experimentar con los mismos objetos, puedes ver más claramente la diferencia cuando usando diferentes variaciones del selector de atributos.

Para aplicar un estilo específico a uno de los valores del atributo, separado por espacio, puede utilizar el operador “~”; La sintaxis de escritura será la siguiente:

En relación a los mismos párrafos que estamos considerando en la publicación de hoy, definiremos la siguiente regla de estilo, indicando la palabra “Wordpress” en el valor del atributo:

PAG (color: verde; )

Ahora el texto del primer y tercer párrafo será de color verde, porque sólo para estos párrafos el valor del atributo de título contiene la palabra “Wordpress”, separada del resto del texto por un espacio. El texto del segundo párrafo sigue siendo el mismo. ¿Por qué, ya que el título también incluye WordPress? Sí, porque esta palabra en el significado del título del segundo párrafo no está separada por un espacio, sino por un guión “-”.

Entonces, hemos entendido que las acciones del operador “~” se aplican a un fragmento de texto separado por un espacio. Es decir, a uno de varios valores de un atributo particular, que están separados entre sí por espacios. En nuestro caso, cuando utilizamos el atributo de título, los valores separados por espacios son las palabras individuales en el valor del título.

Uf, me hizo sudar de celo, pero parece que masticó todo hasta las partículas más pequeñas para que los principiantes pudieran entenderlo. Vayamos más allá y veamos algunos casos más de uso de selectores de atributos. Ten paciencia, no queda mucho, aunque en mi opinión todo debería ser interesante cuando puedas poner a prueba los postulados de la teoría en la práctica.

Selectores CSS: el valor del atributo comienza con un texto específico, termina con un texto específico y un guión en el valor del atributo

Avanzamos más en el marco de nuestra lección teórica y práctica, dedicado a los selectores de atributos CSS. Dado que esta publicación es bastante larga, permítanme recordarles una vez más que estamos viendo un ejemplo con tres párrafos formados usando la etiqueta p y el atributo de título (información sobre herramientas) directamente en el campo de la herramienta de edición en línea en el navegador Google Chrome. Esta herramienta se llama, en particular, simplemente presionando la tecla F12.

La nueva versión de WordPress se lanzará a más tardar en abril de 2013.

El complemento WordPress One Seo Pack ha adquirido funciones adicionales, que se pueden encontrar en el sitio web oficial.

El complemento WP Tuner no se ha actualizado durante más de un año, por lo que su uso continuo es inapropiado.

Ahora veamos algunas variaciones más del selector de atributos, es decir, cuando el valor del atributo comienza con un texto específico, termina con un texto específico y cuando el valor del atributo contiene un guión.

Todas estas sutilezas en el uso de diferentes opciones para los valores de los atributos le permiten crear un sistema verdaderamente flexible para diseñar páginas de sitios web. Ahora veamos el efecto del operador "^", que indica que el valor del atributo contiene el texto o la palabra que comienza el valor del atributo de la etiqueta dada. ¿Un poco confuso? Ahora entenderás todo. Primero, daré la sintaxis para escribir una regla de estilo cuando el valor del atributo comienza con un texto determinado:

El siguiente paso es escribir una nueva regla CSS, nuevamente en relación con nuestros párrafos experimentales:

PAG (color: verde; )

Nuevamente, en línea, cuando usamos una herramienta para editar código html y CSS, vemos que esta vez el texto del primer y segundo párrafo adquirió un tinte verde, y el texto del tercero conservó el estilo de un párrafo normal:

Esto se debe a que el valor del atributo de título de ambos primeros párrafos comienza con la palabra "Wordpress". Esta palabra también está presente en el título del tercer párrafo, pero no al principio. Para reforzar esto, daré otro ejemplo en el que conviene utilizar el operador “^”.

Los selectores de atributos son selectores que le permiten aplicar estilos a cualquier elemento HTML que tenga un atributo específico o un valor de atributo específico. Hay muchas formas de utilizarlos, pero a pesar de esta flexibilidad, los selectores de atributos rara vez se utilizan en la práctica, ya que existen selectores más convenientes. Aunque, por otro lado, en ocasiones ayudan mucho.

Sí, y como siempre te lo digo, ni siquiera intentes memorizar todo lo que está escrito a continuación si se te da bien. :) Debes recordar una cosa de esta lección: lo que está escrito en el primer párrafo. El resto solo necesitas descubrirlo y comprenderlo. Entonces.

Sintaxis del selector de atributos

Para aplicar estilos a elementos con un atributo específico, debe especificar este atributo entre corchetes, .

[atributo] ( El valor de la propiedad; ...)

Para que los estilos se apliquen a elementos que no solo tienen un atributo específico, sino un atributo con un valor específico, debe escribir un signo igual (=) después del atributo y este valor, que se puede colocar entre comillas.

[atributo="valor"] ( El valor de la propiedad; ...)

Algunos atributos pueden tener varios valores separados por espacios (por ejemplo, el atributo rel o class de una etiqueta, que veremos un poco más adelante). Entonces, para establecer estilos para elementos para los cuales uno de los valores en los atributos es el mismo, debe colocar los signos ~= (aproximadamente iguales) después del atributo y luego escribir el valor requerido.

[atributo~="valor"] ( El valor de la propiedad; ...)

La cuarta opción está destinada a atributos cuyo valor puede consistir en varias palabras separadas por un guión (por ejemplo, la misma clase). Y te permite aplicar estilos a todos los elementos cuya primera palabra en el valor del atributo sea la misma. Por ejemplo, class="block-left" y class="block-right" . La misma parte aquí es block, por lo que puede usarse como valor.

[atributo|="valor"] ( El valor de la propiedad; ...)

El quinto método conecta estilos a elementos cuyos valores de atributos comienzan con el mismo texto. Por ejemplo, src= "images/bird.png" y src= "images/cat.jpg" . Aquí la misma parte es imágenes/o imágenes o imagen, etc. Es esta parte idéntica la que se registra como valor.

[atributo^="valor"] ( El valor de la propiedad; ...)

Similar al quinto, pero aquí la selección se basa en parte del texto, que por el contrario termina con los valores de los atributos. Digamos src= "image/bird.png" y src= "picture/dog.png" . Está claro que la parte .png es la misma aquí.

[atributo$="valor"] ( El valor de la propiedad; ...)

Si es necesario seleccionar elementos cuyos valores de atributos tengan la misma parte del texto y no importa dónde estén los valores, entonces se utiliza este método. Por ejemplo, href= "http://site/css/" y href= "http://www.site/html/" . Aquí está la misma parte "sitio". Así, por ejemplo, puede seleccionar todos los enlaces que conducen a un sitio específico.

[atributo*="valor"] ( El valor de la propiedad; ...)

Desafortunadamente, Internet Explorer 6.0 no comprende los selectores de atributos en absoluto.

Ejemplo de uso de selectores de atributos en CSS

Resultado en el navegador

A pesar de su flexibilidad y variedad, los selectores de atributos en CSS se utilizan con bastante poca frecuencia. Aunque su uso brinda grandes oportunidades para los desarrolladores web. Te permiten cambiar las propiedades de un elemento con un atributo determinado y, además, con un valor específico. Dependiendo del resultado que desee lograr, se utilizan diferentes sintaxis para los selectores de atributos.

Selector de atributos simple

Se utiliza para establecer el estilo de un atributo si el valor del atributo no juega ningún papel. Y tiene la siguiente sintaxis:

[atributo] (propiedad1: valor; ...) selector [atributo] (propiedad1: valor; ...)

Como ejemplo, intenta escribir una línea como esta en tu hoja de estilo:

P (color: rojo; /* Color del texto */ )

El color del texto solo cambiará si el atributo de alineación de texto se aplica a la etiqueta p

Atributo con valor

Se aplica cuando se especifica un atributo con un valor específico. La sintaxis de la aplicación es la siguiente:

[atributo="valor"] ( propiedad1: valor; ... ) selector [atributo="valor"] ( propiedad1: valor; ... )

En la práctica, por ejemplo, se puede aplicar lo siguiente:

P ( color: rojo; /* Color del texto */ ) p ( color: azul marino; /* Color del texto */ )

El valor del atributo comienza con un texto específico.

Este método de establecer un estilo se puede aplicar, por ejemplo, a enlaces u otros elementos cuyos valores de atributos comiencen con ciertos nombres. Por ejemplo:

Imagen (margen:15px automático;)

La sintaxis de este método de configuración de estilos es la siguiente:

[atributo^="valor"] ( propiedad1: valor; ... ) selector [atributo^="valor"] ( propiedad1: valor; ... )

El valor del atributo termina con un texto específico.

Se utiliza muy raramente. Normalmente, este método de configuración de estilos se utiliza al finalizar los nombres de cualquier enlace o resolución de archivo. La sintaxis general es:

[atributo$="valor"] ( propiedad1: valor; ... ) selector [atributo$="valor"] ( propiedad1: valor; ... )

Puedes usar este método de esta manera:

Img (/* Si la resolución del archivo de imagen termina en .png */ margin:10px auto; ) a ( /* Si el enlace termina en .com */ padding-right: 25px; )

El valor del atributo contiene el texto especificado.

Hay ocasiones en las que es necesario establecer estilos para ciertos enlaces que tienen el mismo texto en el nombre del valor del atributo. La sintaxis de escritura es la siguiente:

[atributo*="valor"] ( propiedad1: valor; ... ) selector [atributo*="valor"] ( propiedad1: valor; ... )

Como ejemplo, utilicé un estilo para cambiar la apariencia de los enlaces donde aparece el nombre “sdcvoy”:

Sitio web de creación propia | Lenguaje HTML | Motor de búsqueda famoso

Como resultado, obtuve lo siguiente:

Uno de varios valores de atributos

A menudo, al especificar atributos, hay una lista de varios valores separados por espacios. Como probablemente ya habrás adivinado, puedes establecer propiedades de estilo para un único valor. La sintaxis de este método es la siguiente:

[atributo~="valor"] ( propiedad1: valor; ... ) selector [atributo~="valor"] ( propiedad1: valor; ... )