Tradução em progresso.

Em nosso artigo final sobre seletores, exploraremos combinadores e grupos de seletores - duas maneiras de combinar vários seletores para obter mais recursos úteis de seleção.

Combinadores e grupos de seletores

Usar um seletor por vez é útil, mas pode ser ineficiente em algumas situações. Os seletores de CSS se tornam ainda mais úteis quando você começa a combiná-los para realizar seleções refinadas. CSS tem várias maneiras de selecionar elementos com base em como eles estão relacionados uns aos outros. Essas relações são expressas com combinadores da seguinte maneira (A e B representam qualquer seletor visto acima):

Name Syntax Selects
Grupo de seletores A, B Qualquer elemento correspondente a A e/ou B (consulte Grupo de seletores em uma regra, abaixo - Grupo de Seletores não é considerado um combinador).
Selector Descendente A B Qualquer elemento correspondente a B que seja descendente de um elemento que corresponda a A (isto é, um filho ou um filho de um filho, etc.).
Selector Filho A > B Qualquer elemento que corresponda a B que seja um filho direto de um elemento que corresponda a A.
Selector de  irmão adjacente A + B Qualquer elemento correspondente a B que seja o próximo irmão de um elemento que corresponda A (ou seja, o próximo filho do mesmo pai).
Selector de irmão geral A ~ B Qualquer elemento correspondente a B que seja um dos irmãos próximos de um elemento que corresponda A (ou seja, um dos próximos filhos do mesmo pai).

Exemplo de combinadores

Vejamos um exemplo com tudo isso trabalhando junto:

<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Qty.</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lawnchair</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow rice bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

Então, vamos usar a seguinte folha de estilo:

/* Basic table setup */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* All <td>s within a <table> and all <th>s within a <table>
   Comma is not a combinator, it just allows you to target
   several selectors with the same CSS ruleset */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* All <th>s within <thead>s that are within <table>s */
table thead th {
  color: white;
  background: black;
}

/* All <td>s preceded by another <td>,
   within a <tbody>, within a <table> */
table tbody td + td {
  text-align: center;
}

/* All <td>s that are a last child,
   within a <tbody>, within a <table> */
table tbody td:last-child {
  text-align: right
}

/* All <th>s, within a <tfoot>s, within a <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* All <td>s preceded by a <th>, within a <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* All pseudo-elements "before" <td>s that are a last child,
   appearing within elements with a class of "with-currency" that
   also have an attribute "lang" with the value "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* All pseudo-elements "after" <td>s that are a last child,
   appearing within elements with the class "with-currency" that
   also have an attribute "lang" with the value "fr" */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';
}

Isso nos deu um pouco dos seguintes bons estilos de tabela:

Aprendizado ativo: escrevendo seus próprios combinadores

O exemplo acima foi projetado para mostrar o tipo de complexidade que você pode começar a alcançar com combinadores. Neste aprendizado ativo, faremos com que você escreva alguns dos seus próprios seletores mais simples, que incluem combinadores. Neste exercício, você precisa adicionar um seletor às regras de 2 a 4 para:

  1. Links de estilo, mas apenas links que estão dentro da lista não ordenada..
  2. Links de estilo dentro da lista não ordenada, mas apenas quando estão sendo passados.
  3. Estilize apenas o parágrafo que vem diretamente após o cabeçalho de nível superior. 

Se você cometer um erro, você pode sempre redefini-lo usando o botão Reset. Se você ficar realmente preso, pressione o botão Mostrar solução para ver uma possível resposta.

Groups of selectors on one rule

You have seen multiple examples of this in action already, but let's spell it out for clarification. You can write groups of selectors separated by commas to apply the same rule to multiple sets of selected elements at once. For example:

p, li {
  font-size: 1.6em;
}

Or this:

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

What's next

Congratulations — you've come to the end of our rather long journey into learning about Selectors. Even the most skilled web developers are still amazed by what's possible using selectors. However, don't feel bad if you can't remember all the options — bookmark the main selectors page and refer back to it when you need to.

In our next article, we'll turn to another really important fundamental CSS topic — the kinds of values properties can have, and what units are involved in expressing the length, color, or other values you want.  Let's explore CSS values and units.

 

In this module

 

Etiquetas do documento e colaboradores

 Colaboradores desta página: alexandresn
 Última atualização por: alexandresn,