1.9 KiB
| title | localeTitle |
|---|---|
| ID Selector | Seletor de ID |
Seletor de ID
O seletor de ID CSS aplica estilos a um elemento html específico. O seletor de ID CSS deve corresponder ao atributo ID de um elemento HTML. Ao contrário das classes, que podem ser aplicadas a vários elementos em um site, um ID específico pode ser aplicado somente a um único elemento em um site. O ID do CSS substituirá as propriedades da Classe CSS. Para selecionar um elemento com um id específico, escreva um caractere hash (#), seguido pelo id do elemento.
Sintaxe
#specified_id { /* styles */ }
Você pode combinar o seletor de ID com outros tipos de seletores para estilizar um elemento muito específico.
section#about:hover { color: blue; }
div.classname#specified_id { color: green; }
Nota sobre IDs
ID deve ser evitado ao estilizar, se possível. Como tem alta especificidade e pode ser anulada somente se você inline estilos, ou adicionar estilos em <style> . O peso dos seletores de classe de substituição de ID e dos seletores de tipo.
Lembre-se de que o seletor de ID deve corresponder ao atributo de ID de um elemento HTML.
<div id="specified_id"><!-- content --></div>
Especificidade
Os seletores de ID têm alta especificidade, dificultando sua substituição. As classes têm uma especificidade muito menor e geralmente são a maneira preferida de estilizar elementos para evitar problemas de especificidade. Especificidade em MDN
Mais Informações:
freeCodeCamp Challenge - Defina o ID de um elemento
Desafio freeCodeCamp - Use um atributo de ID para estilizar um elemento