Se você tem algum texto que só deseja que fique maior e vermelho se for o primeiro parágrafo de um artigo, como fazer isso?
<article>
<p>I want to be red and larger than the other text.</p>
<p>I want to be normal sized and the default color.</p>
</article>
Você usa um seletor CSS para encontrar aquele elemento específico e aplicar uma regra CSS, como esta.
article p:first-of-type {
color: red;
font-size: 1.5em;
}
O CSS fornece muitas opções para selecionar elementos e aplicar regras a eles, que variam de muito simples a muito complexas, para ajudar a resolver situações como essa.
As partes de uma regra de CSS
Para entender como os seletores funcionam e sua função no CSS, é importante conhecer as partes de uma regra CSS. Uma regra CSS é um bloco de código, contendo um ou mais seletores e uma ou mais declarações.
Nesta regra de CSS, o seletor é .my-css-rule que encontra todos os elementos com uma classe de my-css-rule na página. Existem três declarações dentro das chaves. Uma declaração é um par de propriedade e valor que aplica estilos aos elementos correspondidos pelos seletores. Uma regra de CSS pode ter quantas declarações e seletores você desejar.
Seletores simples
O grupo mais direto de seletores tem como alvo elementos HTML mais classes, IDs e outros atributos que podem ser adicionados a uma tag HTML.
Seletor universal
Um seletor universal - também conhecido como curinga - corresponde a qualquer elemento.
* {
color: hotpink;
}
Esta regra faz com que cada elemento HTML na página tenha texto hotpink.
Seletor de tipo
Um seletor de tipo corresponde diretamente a um elemento HTML.
section {
padding: 2em;
}
Esta regra faz com que cada elemento <section> tenha 2em de padding em todos os lados.
Seletor de classe
Um elemento HTML pode ter um ou mais itens definidos em seu atributo de class. O seletor de classe corresponde a qualquer elemento que tenha essa classe aplicada a ele.
<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>
Qualquer elemento que tenha a classe aplicada a ele terá a cor vermelha:
.my-class {
color: red;
}
Observe como o . só está presente em CSS e não em HTML. Isso ocorre porque o . caractere instrui a linguagem CSS para corresponder aos membros do atributo de classe. Este é um padrão comum em CSS, onde um caractere especial, ou conjunto de caracteres, é usado para definir os tipos de seletor.
Um elemento HTML que possui uma classe de .my-class ainda corresponderá à regra CSS acima, mesmo se eles tiverem várias outras classes, como esta:
<div class="my-class another-class some-other-class"></div>
Isso ocorre porque o CSS procura por um atributo de class que contém a classe definida, em vez de corresponder exatamente a essa classe.
Seletor de ID
Um elemento HTML com um id deve ser o único elemento em uma página com esse valor de ID. Você seleciona elementos com um seletor de ID como este:
#rad {
border: 1px solid blue;
}
Este CSS aplicaria uma borda azul ao elemento HTML que possui um id de rad , como este:
<div id="rad"></div>
Da mesma forma que o seletor de classes ., use um # para instruir o CSS a procurar um elemento que corresponda ao id que o segue.
Seletor de atributo
Você pode procurar por elementos que possuem um determinado atributo HTML, ou um determinado valor para um atributo HTML, usando o seletor de atributos. Instrua o CSS a procurar atributos envolvendo o seletor com colchetes ([ ]).
[data-type='primary'] {
color: red;
}
Este CSS procura todos os elementos que possuem um atributo de data-type de dados com um valor primary, como este:
<div data-type="primary"></div>
Em vez de procurar um valor específico de data-type de dados, você também pode procurar elementos com o atributo presente, independentemente de seu valor.
[data-type] {
color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>
Ambos os <div> terão texto em vermelho.
Você pode usar seletores de atributo com distinção entre maiúsculas e minúsculas adicionando um s ao seu seletor de atributo.
[data-type='primary' s] {
color: red;
}
Isso significa que se um elemento HTML tivesse um data-type de Primary, em vez de primary , ele não obteria texto em vermelho. Você pode fazer o oposto - não diferenciação de maiúsculas e minúsculas - usando um operador i
Junto com os operadores de caso, você tem acesso a operadores que combinam partes de strings dentro de valores de atributo.
/* A href that contains "example.com" */
[href*='example.com'] {
color: red;
}
/* A href that starts with https */
[href^='https'] {
color: green;
}
/* A href that ends with .com */
[href$='.com'] {
color: blue;
}
Seletores de agrupamento
Um seletor não precisa corresponder a apenas um único elemento. Você pode agrupar vários seletores, separando-os com vírgulas:
strong,
em,
.my-class,
[lang] {
color: red;
}
Este exemplo estende a mudança de cor para os elementos <strong> <em>. Ele também é estendido para uma classe chamada .my-class e um elemento que possui um atributo lang
Check your understanding
Test your knowledge of simple selectors
* {}
What kind of simple selector is used in the above snippet?
[] are used for attribute simple selectors.# are used for ID simple selectors.* is the universal simple selector.. are used for class simple selectors.div {}
What kind of simple selector is used in the above snippet?
. is used for class simple selectors.element name is used for type simple selectors.[] are used for attribute simple selectors.# is used for ID simple selectors.Pseudo-classes e pseudo-elementos
O CSS fornece tipos de seletores úteis que se concentram no estado específico da plataforma, como quando um elemento é passado, estruturas dentro de um elemento ou partes de um elemento.
Pseudo-classes
Os elementos HTML encontram-se em vários estados, seja porque interagem com eles ou porque um de seus elementos filhos está em um determinado estado.
Por exemplo, um elemento HTML pode ser passado com o ponteiro do mouse por um usuário ou um elemento filho também pode ser passado pelo usuário. Para essas situações, use a :hover.
/* Our link is hovered */
a:hover {
outline: 1px dotted green;
}
/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
background: floralwhite;
}
Saiba mais no módulo de pseudo-classes.
Pseudo-elemento
Os pseudo-elementos diferem das pseudo-classes porque em vez de responder ao estado da plataforma, eles agem como se estivessem inserindo um novo elemento com CSS. Pseudo-elementos também são sintacticamente diferente da pseudo-classes, porque em vez de usar um único sinal dois pontos (:), usamos dois pontos duplos (::).
.my-element::before {
content: 'Prefix - ';
}
Como na demonstração acima, onde você prefixou o rótulo de um link com o tipo de arquivo, você pode usar o pseudo-elemento ::before para inserir conteúdo no início de um elemento, ou o pseudo-elemento ::after no final de um elemento.
Pseudo-elementos não se limitam a inserir conteúdo, no entanto. Você também pode usá-los para direcionar partes específicas de um elemento. Por exemplo, suponha que você tenha uma lista. Use ::marker para definir o estilo de cada marcador (ou número) na lista
/* Your list will now either have red dots, or red numbers */
li::marker {
color: red;
}
Você também pode usar ::selection para aplicar estio ao conteúdo que foi destacado por um usuário.
::selection {
background: black;
color: white;
}
Saiba mais no módulo sobre pseudoelementos.
Check your understanding
Test your knowledge of pseudo selectors
Pseudo-element selectors use how many colons?
: is used to target pseudo-classes.:: are used to target pseudo-elements.p:hover {
background: white;
color: black;
}
What kind of pseudo selector is used in the above snippet?
: is used to target pseudo-classes.:: are used to target pseudo-elements.Seletores complexos
Você já viu uma vasta gama de seletores, mas às vezes, você precisará de um controle mais refinado com seu CSS. É aqui que os seletores complexos entram em cena para ajudar.
Vale a pena lembrar que, embora os seletores a seguir nos deem mais poder, podemos apenas cascatear para baixo, selecionando os elementos filhos. Não podemos direcionar para cima e selecionar um elemento pai. Abordaremos o que é a cascata e como ela funciona em uma lição posterior.
Combinadores
Um combinador é o que fica entre dois seletores. Por exemplo, se o seletor foi p > strong, o combinador é o caractere >. Os seletores que usam esses combinadores ajudam a selecionar itens com base em suas posições no documento.
Combinador descendente
Para entender os combinadores descendentes, você precisa primeiro entender os elementos pai e filho.
<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
O elemento pai é o <p> que contém o texto. Dentro desse <p> está um elemento <strong>, tornando seu conteúdo em negrito. Por estar dentro do <p>, é um elemento filho.
Um combinador descendente nos permite almejar um elemento filho. Isso usa um espaço () para instruir o navegador a procurar elementos filho:
p strong {
color: blue;
}
Este snippet seleciona todos os <strong> elementos que são elementos filho dos elementos <p> apenas, tornando-os azuis recursivamente.
Este efeito é melhor visualizado no exemplo acima, usando o seletor combinador, .top div. Essa regra CSS adiciona preenchimento esquerdo a esses elementos <div> Como o combinador é recursivo, todos os <div> que estão em .top terão o mesmo preenchimento aplicado a eles.
Dê uma olhada no painel HTML nesta demonstração para ver como o .top tem vários <div> que, eles próprios, têm elementos filhos <div>
Próximo irmão combinador
Você pode procurar um elemento que segue imediatamente outro elemento usando um + em seu seletor.
Para adicionar espaço entre os elementos empilhados, use o próximo irmão combinador para adicionar espaço apenas se um elemento for o próximo irmão de um elemento filho de .top.
Você pode adicionar margem a todos os elementos filho de .top, usando o seguinte seletor:
.top * {
margin-top: 1em;
}
O problema com isso é que, como você está selecionando cada elemento filho de .top, essa regra potencialmente cria espaço extra desnecessário. O próximo combinador irmão, misturado com um seletor universal, permite não apenas controlar quais elementos recebem espaço, mas também aplicar espaço a qualquer elemento. Isso fornece alguma flexibilidade de longo prazo, independentemente de quais elementos HTML aparecem em .top.
Subsequente - irmão combinador
Um combinador subsequente é muito semelhante a um seletor irmão seguinte. No entanto, em vez de um +, use um caractere ~. A diferença é que um elemento precisa apenas seguir outro elemento com o mesmo pai, em vez de ser o próximo elemento com o mesmo pai.
Este combinador subsequente fornece um pouco menos de rigidez, o que é útil em contextos como o exemplo acima, onde alteramos a cor de um switch personalizado quando sua caixa de seleção associada tem o estado :checked
Combinador filho
Um combinador filho (também conhecido como descendente direto) permite mais controle sobre a recursão que vem com os seletores do combinador. Ao usar o >, você limita o seletor de combinador para aplicar apenas aos filhos diretos.
Considere o exemplo anterior do seletor irmão seguinte. O espaço é adicionado a cada irmão seguinte , mas se um desses elementos também tiver elementos do próximo irmão como filhos, isso pode resultar em espaçamento extra indesejável.
Para aliviar esse problema, altere o próximo seletor irmão para incorporar um combinador filho: > * + *. A regra agora só se aplica a filhos diretos de .top .
Seletores compostos
Você pode combinar seletores para aumentar a especificidade e a legibilidade. Por exemplo, para direcionar <a>, que também têm uma classe de .my-class, escreva o seguinte:
a.my-class {
color: red;
}
Isso não aplicaria uma cor vermelha a todos os links e também aplicaria apenas a cor vermelha a .my-class se estivesse em um elemento <a>. Para saber mais sobre isso, consulte o módulo de especificidade.
Check your understanding
Test your knowledge of complex selectors
Which of the following symbols is not selector combinator?
section.awesome {
border: 1px solid hotpink;
}
The above selector is an example of a...