Selector de CSS para o primeiro elemento com classe

O Nível 3 dos selectores introduz uma pseudo-classe :first-of-type , que representa o primeiro elemento entre irmãos do seu tipo de elemento. Esta resposta explica, com ilustrações, a diferença entre :first-child e :first-of-type. No entanto, como em :first-child, ele não olha para quaisquer outras condições ou atributos. Em HTML, o tipo de elemento é representado pelo nome da tag. Na pergunta, esse tipo é p.

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... em seguida, "desfazer" os estilos para os elementos com a classe que vir após o primeiro, usando geral irmão combinator ~ em um interesse regra:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. Não são aplicadas regras; não é feita nenhuma fronteira.
   Este elemento não tem a classe red, por isso é ignorado.

2. Apenas a primeira regra é aplicada; uma fronteira vermelha é renderizada.
   Este elemento tem a classe red, mas não é precedido por nenhum elemento com a classe red em seu pai. Assim, a segunda regra não é aplicada, apenas o primeiro, e o elemento mantém a sua fronteira.

3. Ambas as regras são aplicadas; nenhuma fronteira é renderizada.
   Este elemento tem a classe red. É também precedido por pelo menos um outro elemento com a classe red. Assim, ambas as regras são aplicadas, e a segunda declaração border sobrepõe-se à primeira, "desfazendo-a", por assim dizer.

Como bónus, apesar de ter sido introduzido nos selectores 3, o combinador de irmãos é muito bonito. bem apoiado pela IE7 e mais recente, ao contrário de :first-of-type e {[26] } que só são suportados pela IE9 adiante. Se você precisa de um bom suporte de navegador, você está com sorte.

De fato, o fato de que o combinador de irmãos é o único componente importante nesta técnica, e ele tem um suporte de navegador tão incrível, torna esta técnica muito versátil - você pode adaptá-la para filtrar elementos por outras coisas, além de selectores de classe:

• Pode usar isto para contornar :first-of-type em IE7 e IE8, simplesmente fornecendo um selector de tipo em vez de um selector de classe (mais uma vez, mais sobre a sua utilização incorrecta aqui numa secção posterior):

  article > p {
      /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
  }
  
  article > p ~ p {
      /* Undo the above styles for every subsequent article > p */
  }
  

• Você pode filtrar por selectores de atributos ou quaisquer outros selectores simples em vez de classes.

• Você também pode combinar esta técnica primordial com pseudo-elementos mesmo que pseudo-elementos tecnicamente não são seletores simples.

Note que para isso para funcionar, você precisará saber com antecedência o que os estilos padrão serão para os seus outros elementos irmãos para que você possa anular a primeira regra. Além disso, uma vez que isto envolve regras imperiais em CSS, você não pode alcançar a mesma coisa com um único selector para usar com os selectores API de selénio 'S localizadores de CSS.

Vale a pena mencionar que os selectores 4 introduz uma extensão à notação :nth-child() (originalmente uma pseudo-classe inteiramente nova chamado :nth-match()), que lhe permitirá usar algo como :nth-child(1 of .red) em vez de um hipotético .red:first-of-class. Sendo uma proposta relativamente recente, ainda não existem implementações interoperáveis suficientes para ser utilizável em locais de produção. Esperemos que isto mude em breve. Entretanto, a solução que sugeri deve funcionar para a maioria dos casos.

Tenha em mente que esta resposta assume que a questão está à procura de cada elemento do primeiro filho que tenha uma determinada classe. Não há nenhum pseudo-Classe nem sequer uma solução CSS genérica para a n - ésima correspondência de um selector complexo ao longo de todo o documento - se uma solução existe depende fortemente da estrutura do documento. jQuery fornece :eq(), :first, :last e mais para este propósito, mas note novamente que eles funcionam muito diferente de :nth-child() et al . Usando a API dos selectores, tanto pode usar document.querySelector() para obter a primeira correspondência:

var first = document.querySelector('.home > .red');

Ou utilizar document.querySelectorAll() com um indexador para escolher qualquer produto específico match:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Embora a solução .red:nth-of-type(1) na resposta original aceite por Philip Daubmeier obras (que foi originalmente escrita porMartyn mas apagada desde então), não se comporta da maneira que se espera que aconteça.

Por exemplo, se apenas quisesse seleccionar o p na sua marcação original:

<p class="red"></p>
<div class="red"></div>

... então você não pode usar .red:first-of-type (equivalente a .red:nth-of-type(1)), porque cada elemento é o primeiro (e único) um de seu tipo (p e div respectivamente), por isso ambos serão correspondidos pelo selector.

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

... o selector irá falhar imediatamente, porque o primeiro elemento .red é agora o segundo p elemento.