Presença e valores exatos

Lição 12 de 15 do curso Seletores CSS da Coddy.

Nesta lição, você aprenderá sobre seletores de presença de atributo e de valor exato. Seletores de atributo são usados para selecionar elementos com base na presença ou ausência de um atributo, ou no valor exato de um atributo.

Seletor de Presença de Atributo:

O seletor de presença de atributo visa elementos que possuem um atributo específico, independentemente do seu valor. Ele é denotado pelo uso de colchetes com o nome do atributo dentro.

Exemplo:

/* Seleciona todos os elementos com um atributo "target" */
[target] {
   color: blue;
}

Seletor de Valor Exato:

O seletor de valor exato visa elementos com um atributo específico e um valor de atributo específico. Ele é denotado pelo uso de colchetes com o nome do atributo seguido por um sinal de igual e o valor desejado dentro.

Exemplo:

/* Seleciona o elemento com o atributo "data-type" tendo o valor "important" */
[data-type="important"] {
   font-weight: bold;
}

Exemplos de Código:

HTML:

<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>

CSS:

[target] {
   text-decoration: underline;
}
[data-type="important"] {
   color: red;
}

Estes exemplos demonstram como os seletores de atributo CSS funcionam, selecionando elementos com base na presença ou no valor exato de seus atributos e aplicando os estilos correspondentes a eles.

Desafio

Fácil

Você foi encarregado de estilizar um formulário HTML simples usando seletores de atributo.

Aplique os seguintes estilos usando seletores de atributo:

Adicione uma borda green aos campos de entrada com o atributo type definido como "text".
Altere a cor de fundo dos campos de entrada com o atributo type definido como "email" para lightblue.
Defina a cor do texto dos campos de entrada com o atributo type definido como "password" como red.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
    /* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    
    <input type="submit" value="Submit">
</form>
</body>
</html>

Todas as lições de Seletores CSS

1Introdução aos Seletores CSS

Objetivo dos Seletores CSS Por que eles são importantes?

4Seletores de atributo

Introdução aos seletores de atributoPresença e valores exatosSeletores de valor de atributo Seletores de valor de atributo II Seletores de valor de atributo III

2Seletores simples

Seletores de tipo Seletores de classe Seletores de ID Seletores universais

3Seletores Combinadores

Seletor de filho Seletor de descendente Seletor de irmão adjacente Seletor de irmão geral