Seletores
Os seletores CSS são ferramentas poderosas que permitem direcionar e estilizar elementos HTML em uma página da web. Eles desempenham um papel fundamental na aplicação de estilos de forma seletiva, permitindo que os desenvolvedores personalizem a aparência de seus documentos. Abaixo, estão alguns dos seletores mais comuns e suas utilizações:
Seletores de tipo
Os seletores de tipo direcionam todos os elementos de um determinado tipo.
p {
color: #333;
}Neste exemplo, todos os parágrafos (<p>) terão a cor do texto definida como cinza escuro.
Seletores de classe
Os seletores de classe são precedidos por um ponto e aplicam estilos a elementos com uma determinada classe.
.destaque {
font-weight: bold;
}Ao usar a classe “destaque” em um elemento HTML (<div class="destaque">...</div>), o texto será exibido em negrito.
article h2.destaque {
font-weight: bold;
}Ela aplicará negrito apenas aos elementos <h2> com a classe .destaque que estão dentro de um elemento <article>.
.botao.vermelho {
background-color: red;
color: white;
}<button class="botao vermelho">Clique-me</button>No exemplo acima, apenas elementos que têm ambas as classes “botao” e “vermelho” serão estilizados com fundo vermelho e texto branco.
.menu .item {
font-weight: bold;
}<div class="menu">
<ul>
<li class="item">Opção 1</li>
<li class="item">Opção 2</li>
</ul>
</div>Neste caso, todos os elementos com a classe “item” que estão aninhados dentro de um elemento com a classe “menu” terão a propriedade font-weight definida como “bold”.
Seletores de ID
Os seletores de ID são precedidos por um sustenido e aplicam estilos a um único elemento com um ID específico.
#cabecalho {
background-color: #3498db;
}No exemplo acima, o elemento com o ID “cabecalho” terá um fundo azul.
Seletores de atributo
Os seletores de atributo direcionam elementos com um determinado atributo.
input[type="text"] {
border: 1px solid #ccc;
}Este seletor aplica uma borda a todos os campos de entrada de texto (<input type="text">).
Seletores de descendência
Os seletores de descendência direcionam elementos que são descendentes de outro elemento, independentemente do nível na hierarquia.
article h2 {
color: #e74c3c;
}Este seletor direciona todos os elementos <h2> que estão dentro de um elemento <article>.
Child selector (>)
O seletor de filho (>) direcionam elementos que são filhos diretos de outro elemento. Essa seleção específica é útil quando se deseja aplicar estilos apenas aos elementos imediatamente descendentes de um pai, ignorando elementos aninhados mais profundamente.
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
<li>Subitem 3.1</li>
<li>Subitem 3.2</li>
</ul>
</ul>
</div>Se quisermos aplicar estilos apenas aos elementos <li> que são filhos diretos da <ul> dentro da <div> com a classe “menu”, podemos usar o seletor de filho da seguinte maneira:
.menu > ul > li {
font-weight: bold;
}Neste exemplo, apenas os elementos <li> que são filhos diretos da <ul> dentro da <div> com a classe “menu” terão a propriedade font-weight definida como “bold”.
Seletor universal (*)
O seletor universal direciona todos os elementos na página.
* {
margin: 0;
padding: 0;
}Este exemplo define margem e preenchimento como zero para todos os elementos.
Nota
A estilização do código a cima é frequentemente utilizados nos projetos, isso é referido como
reset.