Javascript Adicionar atributo CSS

| | | | | | | |

Os seletores CSS permitem que os desenvolvedores da Web estilizem um determinado elemento ou conjunto de elementos em uma página da Web.

Ao trabalhar com seletores, você pode decidir segmentar apenas elementos com um atributo específico. É aí que entra o seletor de atributo CSS. O Attribute Picker ajuda você a aplicar determinados estilos apenas a elementos com um atributo específico.

Este tutorial explica como usar o seletor de atributo CSS ao estilizar elementos. Ao final deste tutorial, você terá uma boa compreensão do uso do seletor de atributos para definir elementos.

Atributos HTML

Em HTML, atributos são usados para definir características ou propriedades de um elemento. Por exemplo, o atributo height define a altura de uma imagem e o atributo title define o título de um elemento da web.

Declare atributos usando a estrutura do par nome/valor. Isso significa que um atributo como este aparecerá em um arquivo HTML: name = "value". Para saber mais sobre atributos HTML, leia nosso guia para atributos HTML .

Seletor de atributos CSS

Ao projetar um site, você pode querer estilizar elementos com base em seu valor de atributo ou não. Para fazer isso, você usa o seletor de atributo CSS.

As duas etapas a serem seguidas ao usar o seletor de atributo são:

  1. Envolver um atributo ` s entre colchetes.
  2. Especifique os estilos que deseja aplicar aos atributos com esse nome.

Vamos explorar alguns exemplos do seletor de atributos CSS em ação.

CSS [Atributo]

A forma mais básica do atributo seletor é: [attribute]. Em outras palavras, coloque o nome de um atributo entre colchetes.

Suponha que queremos definir o tamanho da fonte de cada elemento com um atributo title para 16px. Podemos fazer isso usando este código:

Nosso código de regra CSS só se aplica a elementos com um atributo title. O tamanho da fonte de qualquer elemento com um atributo title especificado, independentemente do valor armazenado pelo atributo, mudará para 16px de acordo com a regra acima.

Você pode fazer seu seletor de atributo mais preciso especificando um ou ambos os seguintes:

Por exemplo, suponha que você queira definir o tamanho de todo o texto no parágrafo cabeçalho para 16px. Você pode fazer isso usando este código:

A letra p no início do atributo selector diz ao navegador para aplicar o estilo de fonte apenas às tags

. A parte [title] do seletor informa ao navegador para aplicar o estilo de polícia somente a

tags com um atributo title especificado.

T Assim, após ler este código, o navegador irá converter o tamanho da fonte de todos os títulos de parágrafo (p) para 16px. Este código não afetará nenhum outro texto na página.

O seletor de atributo [attribute = "value"] permite que programadores apliquem estilos apenas a elementos. Atributo cujos valores ‚Äã‚Äãsão iguais ao valor especificado no seletor.

Suponha que queremos definir a cor de fundo de todos os links na página inicial do Python.Engineering para laranja. Este estilo deve definir a cor de fundo do elemento a para laranja. Podemos executar essa ação usando o seguinte código CSS:

Esta regra seleciona todos os elementos em sua página da web cujo atributo href é igual a python.engineering. Em seguida, defina a cor de fundo de todos esses elementos para laranja.

CSS [attribute ~ = "value"]

O [attribute ~ = & ldquo O seletor ; value "] permite selecionar elementos com valores de atributo ‚Äã‚Äãque contenham uma palavra específica.

Por exemplo, suponha que você queira aplicar um estilo a todos os p elementos cujos títulos correspondem à palavra blue. Para este estilo, a cor do texto desses elementos deve ser alterada para azul.

Podemos usar a seguinte regra para fazer isso:

Esta regra irá encontrar todas as tags

associadas a títulos que contenham a palavra "blue" e definir a cor do texto nestas tags

blue. se uma

tag tiver o título cor azul ou cor azul, esse estilo será aplicado. No entanto, essa regra não se aplica a uma

tag com o título blueColor porque a palavra b lue não está presente independentemente no atributo.

Isso é diferente de * = seletor, que não só pode encontrar uma palavra específica em um atributo, mas também pode encontrar um valor específico em um atributo.

CSS [attribute | = "valor"]

O [atributo | = "value"] selector permite que você selecione elementos cujos atributos comecem com um determinado valor (por exemplo, "Top"). Isso inclui elementos com atributos começando com o valor especificado e contendo um hífen seguido por texto adicional (por exemplo, "top-style" e outros valores "top-") Observe que o código requer uma barra vertical (|) após a palavra " Class.‚"

Por exemplo, suponha que você queira atribuir um preenchimento superior de 10 pixels a cada com um atributo de classe começando com top, incluindo aqueles seguidos por outros valores ‚Äã‚Äãseparados por hífens. Você pode fazer isso usando este código:

Esta regra aplicará um preenchimento de 10px na parte superior de cada

É importante observar que o valor especificado deve ser uma única palavra inteira ou uma palavra seguida por um hífen. Em outras palavras, nosso estilo acima se aplicaria a elementos com a classe nome topstyle.

CSS [atributo ^ = "valor‚"]

O [atributo ^ = & ldquo O seletor; value ‚"] é usado para selecionar elementos cujo valor de atributo começa com um valor específico. O valor especificado não precisa ser uma palavra inteira, ao contrário do [attribute | = "value"] sobre o qual falamos anteriormente.

Suponha que queiramos aplicar um pad com menos de 10 pixels para cada elemento

O navegador web do usuário aplicará o estilo padding-bottom que definimos para todas as tags

CSS [attribute $ = "value‚"]

L `operator $ = é usado para selecionar todos os elementos cujos valores de atributo ‚Äã‚Äãend com um determinado valor. Por exemplo, digamos que você queira alterar a cor do texto para cinza de todo texto de hipertexto cujos valores de atributo href ‚Äã‚Äãend com .app. Você pode fazer isso usando este código:

Este seletor será aplicado a todos os elementos de sua página da web cujos valores href ‚Äã‚Äãend com .app .

CSS [attribute * = "value"]

O operador * = permite selecionar todos os elementos cujos valores ‚Äã‚Äãd `attribute contenham um determinado atributo valor. Ao contrário do operador ~ =, esse seletor de atributo pode encontrar um valor específico em uma classe, não apenas uma única palavra.

Por exemplo, suponha que queremos aplicar um preenchimento de 50px ao redor de todas as tags

Esta regra definirá um preenchimento de 50px em torno de todos os elementos HTML com atributos at class que contenham o termo allPadding. Assim, os elementos com os nomes das classes new allPadding, surround allPadding red, allPaddingblue e allPadding-true serão todos sujeito a este estilo.

Conclusão

O seletor de atributo CSS permite que os desenvolvedores selecionem elementos com base em valores de atributo ‚Äã‚Äãe apliquem estilos específicos a esses elementos.

p>

Este tutorial explicou, por meio de exemplos, os conceitos básicos de seletores de atributo e como usar todos os tipos de seletores de atributo CSS. Agora você está pronto para começar a usar o CSS Attribute Selector como um profissional.


CSS é uma das três principais habilidades usadas no desenvolvimento web.Baixe o aplicativo
free Python.Engineering hoje para falar com um coach de carreira experiente que pode ajudar a aconselhá-lo sobre as habilidades necessárias para seguir uma carreira como desenvolvedor 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