Questão FC373515
Considere o fragmento de uma página web criada com HTML5 e CSS3. <head> <style> [title~=carro] { border: 5px solid #FF0000; } </style> </head> <body> <img src="carro1.jpg" title="c
Desenvolvimento Web
FCC · 2019
Considere o fragmento de uma página web criada com HTML5 e CSS3.
<head>
<style>
[title~=carro] {
border: 5px solid #FF0000;
}
</style>
</head>
<body>
<img src="carro1.jpg" title="carro de corrida">
<img src="carro2.gif" title="carro lento">
<img src="carro3.gif" title="carro">
<img src="carro4.gif" title="viagem de carro">
<img src="moto" title="motocicleta">
</body>
A configuração CSS3 de borda
- não será aplicada, pois não é possível aplicar uma configuração CSS usando o atributo title s.
- será aplicada a apenas à imagem carro3.gif, que possuir o atributo title="carro".
- será aplicada a todos os elementos img cujo atributo title contenha a palavra carro.
- será aplicada a todos os elementos img cujo atributo title contenha uma string terminada pela palavra carro.
- será aplicada somente aos elementos cujo atributo title contenha uma string iniciada pela palavra carro.
Mostrar resposta e comentário
Gabarito
Certo
Comentário do professor
[title~=carro] é um seletor de atributo que seleciona elementos cujo atributo title contém a palavra carro como uma palavra isolada em uma lista separada por espaços.
O operador ~= exige correspondência por palavra inteira: encontra "carro" quando aparece sozinha ou separada por espaços no valor do atributo; não basta ser apenas uma substring dentro de outra palavra.
No fragmento dado, os img com title="carro de corrida", title="carro lento", title="carro" e title="viagem de carro" contêm a palavra carro, portanto receberão a borda definida (5px solid #FF0000). O img com title="motocicleta" não será afetado.
Conteúdo do catálogo FC Concursos · Atualizado em