Javascript Agregar Atributo Css

| | | | | | | |

Los selectores de CSS permiten a los desarrolladores web diseñar un elemento o conjunto de elementos en particular en una página web.

Al trabajar con selectores, puede decidir apuntar solo a elementos con un atributo en particular. Aquí es donde entra en juego el selector de atributos CSS. El Selector de atributos lo ayuda a aplicar ciertos estilos solo a elementos con un atributo específico.

Este tutorial explica cómo usar el selector de atributos CSS al diseñar elementos. Al final de este tutorial, comprenderá bien el uso del Selector de atributos para definir elementos.

Atributos HTML

En HTML, los atributos se usan para definir elementos adicionales. características o propiedades de un elemento. Por ejemplo, el atributo de altura define la altura de una imagen y el atributo de título define el título de un elemento web.

Declare atributos utilizando la estructura de par nombre/valor. Esto significa que un atributo como este aparecerá en un archivo HTML: name = "value". Para obtener más información sobre los atributos HTML, lea nuestra guía de atributos HTML .

Selector de atributos CSS

Al diseñar un sitio, es posible que desee diseñar elementos en función del valor de su atributo o no. Para hacer esto, use el selector de atributos CSS.

Los dos pasos a seguir cuando use el selector de atributos son:

  1. Envuelva un atributo ` s entre corchetes.
  2. Especifique los estilos que desea aplicar a los atributos con este nombre.

Exploremos algunos ejemplos del selector de atributos CSS en acción.

CSS [Atributo]

La forma más básica del atributo selector es: [attribute]. En otras palabras, encierre el nombre de un atributo entre corchetes.

Supongamos que queremos establecer el tamaño de fuente de cada elemento con un atributo de título en 16 px. Podemos hacerlo usando este código:

Nuestro código de reglas CSS solo se aplica a elementos con un atributo de título. El tamaño de fuente de cualquier elemento con un atributo de título especificado, independientemente del valor almacenado por el atributo, cambiará a 16 píxeles de acuerdo con la regla anterior.

Puedes hacer tu selector de atributos más preciso especificando uno o ambos de los siguientes:

Por ejemplo, suponga que desea establecer el tamaño de todo el texto en el párrafo encabezado a 16px. Puedes hacerlo usando este código:

La letra p al comienzo del atributo del selector le dice al navegador que aplique el estilo de fuente solo a las etiquetas

. La parte [title] del selector le dice al navegador que aplique el estilo de política solo a

etiquetas con un atributo title específico.

T Entonces, después de leer este código, el navegador convertirá el tamaño de fuente de todos los títulos de párrafo (p) a 16px. Este código no afectará a ningún otro texto de la página.

El selector de atributos [attribute = "value"] permite a los programadores aplicar estilos solo a los elementos. Atributo cuyos valores ‚Äã‚Äãson iguales al valor especificado en el selector.

Supongamos que queremos establecer el color de fondo de todos los enlaces en la página de inicio de Python.Engineering en naranja. Este estilo debería establecer el color de fondo del elemento a en naranja. Podemos realizar esta acción utilizando el siguiente código CSS:

Esta regla selecciona todos los elementos en su página web cuyo atributo href es igual a python.engineering. Luego establezca el color de fondo de todos estos elementos en naranja.

CSS [atributo ~ = "valor"]

El [atributo ~ = & ldquo El selector ; value "] le permite seleccionar elementos con valores de atributo ‚Äã‚Äã que contienen una palabra específica.

Por ejemplo, suponga que desea aplicar un estilo a todos los p elementos cuyos títulos corresponden a la palabra azul. Para este estilo, el color del texto de estos elementos debe cambiarse a azul.

Podemos usar la siguiente regla para hacer esto:

Esta regla encontrará todas las etiquetas

asociadas con títulos que contengan la palabra "azul" y definirá el color del texto en estas etiquetas

azul. si una

etiqueta tiene título color blue o color blue, se aplicará este estilo. Sin embargo, esta regla no se aplica a una

etiqueta con el título blueColor porque la palabra blue no está presente de forma independiente en el atributo.

Esto es diferente de * = selector, que no solo puede encontrar una palabra específica en un atributo, sino que también puede encontrar un valor específico en un atributo.

CSS [atributo | = "valor"]

El [atributo | = "valor"] El selector le permite seleccionar elementos cuyos atributos comienzan con un valor determinado (por ejemplo, "Superior"). Esto incluye elementos con atributos que comienzan con el valor especificado y contienen un guión seguido de texto adicional (por ejemplo, "estilo superior" y otros valores "superiores") Tenga en cuenta que el código requiere una barra vertical (|) después de la palabra " Clase.‚"

Por ejemplo, suponga que desea asignar un relleno superior de 10 píxeles a cada con un atributo de clase que comienza con top, incluidos los seguidos de otros valores ‚Äã‚Äãseparados por guiones. Puedes hacerlo usando este código:

Esta regla aplicará un relleno de 10px en la parte superior de cada

Es importante tener en cuenta que el valor especificado debe ser una sola palabra completa o una palabra seguida de un guión. En otras palabras, nuestro estilo anterior se aplicaría a los elementos con la clase nombre topstyle.

CSS [atributo ^ = "valor‚"]

El [atributo ^ = & ldquo El selector; value ‚"] se usa para seleccionar elementos cuyo valor de atributo comienza con un valor específico. El valor especificado no tiene que ser una palabra completa, a diferencia del [attribute | = "value"] del que hablamos antes.

Supongamos que queremos aplicar un pad de menos de 10 píxeles a cada elemento

El navegador web del usuario aplicará el estilo padding-bottom que definimos a todas las etiquetas

CSS [atributo $ = "valor‚"]

L `operador $ = se utiliza para seleccionar todos los elementos cuyos valores de atributos ‚Äã‚Äãterminan con un cierto valor. Por ejemplo, supongamos que desea cambiar el color del texto a gris de todo el texto de hipertexto cuyos valores de atributo href ‚Äã‚Äã terminan con .app. Puedes hacerlo usando este código:

Este selector se aplicará a todos los elementos de su página web cuyos valores href ‚Äã‚Äã terminen en .app .

CSS [atributo * = "valor"]

El operador * = permite seleccionar todos los elementos cuyos valores ‚Äã‚Äã contienen un atributo particular valor. A diferencia del operador ~ =, este selector de atributos puede encontrar un valor particular en una clase, no solo una sola palabra.

Fo Por ejemplo, supongamos que queremos aplicar un relleno de 50px alrededor de todas las etiquetas

Esta regla definirá un relleno de 50 píxeles alrededor de todos los elementos HTML con atributos de clase que contengan el término allPadding. Por lo tanto, los elementos con los nombres de clase new allPadding, surround allPadding red, allPaddingblue y allPadding-true serán todos sujeto a este estilo.

Conclusión

El selector de atributos CSS permite a los desarrolladores seleccionar elementos en función de los valores de los atributos, y aplicar estilos específicos a esos elementos.

p>

Este tutorial explica, mediante ejemplos, los conceptos básicos de los selectores de atributos y cómo utilizar todos los tipos de selectores de atributos CSS. Ahora está listo para comenzar a usar el Selector de atributos CSS como un profesional.


CSS es una de las tres habilidades principales utilizadas en el desarrollo web. Descargue la aplicación Python.Engineering gratis hoy para hablar con un asesor profesional experimentado que puede asesorarlo sobre las habilidades que necesita para seguir una carrera como desarrollador web.

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method