CSS pseudo-class :Nth-of-type()

Asked

Viewed 346 times

1

Look at that..

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>

In the above example, I want to select the second element of the class P(.p) daughter of a parent(div), and it is not what results.. if I make use of nth-of-type(1) it works, which to me translated would be, select the first element of the paragraphe type son of a father(div). But why nth-of-type(2) does not go there for the fourth paragraph of both Divs, giving the bold effect..

css

  • If I write it, .p:nth-of-type(2) I am wanting to access the element whose class is . p, whose daughter is a father( that in the case is a div ), wouldn’t that be the interpretation? That is, selecting the second element of the class(.p), and as I indicated that the father is the div, so in my view, both Divs would have to have the 4° bold paragraph.

  • @Alexandrec.Caus is pseudo-class does not work the way you are seeking, take a look at this one documentation, what you seem to be looking for is That: Nth-Child

  • To work with :Nth-of-type you would have to move the <p class="p">P4</p> up the ps, but in your case it would be better to use the same :Nth-Child

  • A question, is it worth just using this Nth-of-type, for me to select 9 paragraphs, within a div with 15 paragraphs, or would it be better if I identify by IDS and directly apply in the ID the effect? I say better, in the term of speed, because it is simpler to apply an ID and put a style in it, I’m thinking that delays more using pseudo-selector, browser has to think more.. someone has some comment on this?

2 answers

4


It has how to do using combiners:

/*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>

Each repeat of the class separated by the combinator ~ means a level in the class you want to choose.

Selectors level 3: http://www.w3.org/TR/css3-selectors/

EDIT:

As I quoted in the commentary while we still have level 4 selectors the output would be to use Jquery: http://jsfiddle.net/xL9qw5od/

  • Who knows. rs. A lot of show this selector, I didn’t even know it existed. Congratulations Edi. Gomes already won a vote of mine.

  • I understand, it defines from which level will be applied the style.. so 5 paragraphs, with the 2° and 3° and 5° with the class .p, and I just wanted to apply in the second occurrence of the class .p, using this method will apply in 3° paragraph as in 5° paragraph using div > .p ~ .p. veja -> http://jsfiddle.net/z4WhX/.

  • So you want to apply only on the 3rd?

  • I want to apply in the second occurrence of the class .p within a div for example.. Within this Divs, they could have several paragraphs, not necessarily all with the class .p.

  • So, in case we don’t have level 4 selectors yet see: http://css4-selectors.com/selector/css4/structural-pseudo-class/ the output would be with Jquery: http://jsfiddle.net/xL9qw5od/

0

If you want to select "children" just use "+":

Example

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>

See that I use :first-Child to refer to the first

and '+ p' to reference the next, whenever you want a next one, add '+ p'.

I can’t say this is the best way, but if I’ve got it right, it works.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.