1

Veja só..

div .p:nth-of-type(2) {
  font-weight: bold;
}
DIV 1
<div div="div1">
  <p class="p">p1</p>
  <p>p2</p>
  <p>p3</p>
  <p class="p">p4</p>
</div>

DIV 2
<div id="div2">
  <p class="p">p1</p>
  <p>p2</p>
  <p>p3</p>
  <p class="p">p4</p>
</div>

No exemplo acima, eu quero selecionar o segundo elemento da classe P(.p) filha de um pai(div), e não é o que resulta.. se eu fizer o uso de nth-of-type(1) ele funciona, que para mim traduzido seria, selecionar o primeiro elemento do tipo paragrafo filho de um pai(div). Mas porquê nth-of-type(2) não vai lá para o quarto parágrafo de ambas as divs, dando o efeito negrito..

4
  • Se eu escreve-se, .p:nth-of-type(2) eu estou querendo acessar o elemento cuja classe é .p, cuja é filha de um pai( que no caso é uma div ), não seria essa a interpretação? Ou seja, selecionar o segundo elemento da classe(.p), e como eu indiquei que o pai é a div, logo na minha visão, ambas as divs teriam que ter o 4° parágrafo negritados.
    – Ale
    5/01/2015 às 18:51
  • @AlexandreC.Caus está pseudo-class não funciona da maneira que você está buscando, de uma olhada aqui nessa documentação, o que você parece procurar é isso: nth-child 5/01/2015 às 18:56
  • Para funcionar com o :nth-of-type você teria que mover o <p class="p">p4</p> para cima dos ps, mas no teu caso seria melhor usar o :nth-child mesmo
    – haykou
    5/01/2015 às 19:00
  • Uma dúvida, vale apena usar este nth-of-type, para eu selecionar 9 parágrafos, dentro de uma div com 15 parágrafos, ou seria melhor eu identificar por IDS e aplicar direto na ID o efeito? Digo melhor, no termo de velocidade, porquê é mais simples aplicar uma ID e colocar um estilo nela, estou pensando que atrasa mais usando pseudo-seletor, navegador tem que pensar mais.. alguem tem algum comentário a respeito disso?
    – Ale
    5/01/2015 às 22:36

2 Respostas 2

4

Tem como fazer usando combinadores:

/*Seleciona a segunda ocorrência do elemento com a classe .p dentro de uma div */
div > .p ~ .p {
   font-weight: bold;
   color: blue;
}

/*Seleciona a terceira ocorrência do elemento com a classe .p dentro de uma div */
div > .p ~ .p ~ .p {
   font-weight: bold;
   color: green;
}
DIV1
<div div="div1">
  <p class="p">p1</p>
  <p>p2</p>
  <p>p3</p>
  <p class="p">p4</p>
</div>

DIV 2
<div id="div2">
  <p class="p">p1</p>
  <p>p2</p>
  <p>p3</p>
  <p class="p">p4</p>
  <p class="p">p5</p>
</div>

Cada repetição da classe separada pelo combinador ~ significa um nível na classe que quer escolher.

Seletores nível 3: http://www.w3.org/TR/css3-selectors/

EDIT:

Como citei no comentário enquanto ainda não temos seletores de nível 4 a saída seria usar JQuery: http://jsfiddle.net/xL9qw5od/

5
  • Quem sabe sabe. rs. Muito show esse seletor, nem sabia que isso existia. Parabéns Edi. Gomes já ganhou um voto meu. 5/01/2015 às 19:56
  • Entendo, ele define a partir de qual nível será aplicado o estilo.. logo 5 parágrafos, com o 2° e 3° e 5° com a classe .p, e eu quisesse apenas aplicar na segundo ocorrência da classe .p, usando deste método aplicará no 3° parágrafo quanto no 5° parágrafo usando div > .p ~ .p. veja -> jsfiddle.net/z4WhX.
    – Ale
    5/01/2015 às 20:33
  • Então você quer aplicar somente no 3º?
    – Edi. Gomes
    5/01/2015 às 20:40
  • Quero aplicar na segunda ocorrência da classe .p dentro de uma div por exemplo.. Dentro dessa divs, poderiam ter vários parágrafos, não necessariamente todos com a classe .p.
    – Ale
    5/01/2015 às 20:45
  • Então, no caso como ainda não temos seletores de nível 4 veja: css4-selectors.com/selector/css4/structural-pseudo-class a saída seria fazer com JQuery: jsfiddle.net/xL9qw5od
    – Edi. Gomes
    6/01/2015 às 13:02
0

Se você quer selecionar "filhos" basta usar "+":

Exemplo

div p:first-child + p {
  font-weight: bold;
}
DIV 1
<div div="div1">
  <p class="p">p1</p>
  <p>p2</p>
  <p>p3</p>
  <p class="p">p4</p>
</div>

DIV 2
<div id="div2">
  <p class="p">p1</p>
  <p>p2</p>
  <p>p3</p>
  <p class="p">p4</p>
</div>

Veja que uso o :first-child para referenciar ao primeiro

e '+ p' para referenciar o próximo, sempre que quiser um próximo, acrescente '+ p'.

Não posso dizer que esta é a melhor maneira, mas se entendi bem, isso funciona.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .