5

I want something like jquery :last selector, but in pure css.

How can i get only 'z' paragraph, if i didn't know its index in DOM structure!. or how get last child of class '.area'? I see this CSS3 get last element , but it doesnt work in my case, because i have another childs in parent element.

p.area:last-child donesn't work!

I found a solution, when we know how many elements will be with class .area.

Selector looks like this: p.area ~ p.area ~ p.area But when we didn't know ... I think... just for fun =)

<div>

<h1>This is a heading</h1>
<p class="">The first paragraph.</p>
<p class="area">The x paragraph.</p>
<p class="area">The y paragraph.</p>
<p class="area">The z paragraph.</p>
<p class="">The last paragraph.</p>

</div
Community
  • 1
  • 1
user1842841
  • 51
  • 4

2 Answers2

6

You cant do it without javascript. Here is a quote from the W3C spec:

Standalone text and other non-element nodes are not counted when calculating the position of an element in the list of children of its parent.

Pseudo-classes target elements that can't be targeted with combinators or simple selectors like id or class. These types of pseudo classes are called "Structural Pseudo Classes". They will ignore the fact that there is a class on the element and simply use the DOM to determine the correct element to target.

Your only options are explicit targeting with nth-child or javascript in this instance.

Matthew R.
  • 4,332
  • 1
  • 24
  • 39
  • `Pseudo classes target the element and not the class or ID` That's absolutely wrong as `.area:last-of-type` works **[in this case](http://jsbin.com/iwotob/1/edit)**, the term of `element` is refers to that element you can select by a selector in the DOM. check also my comment below the @Chris' answer. – Hashem Qolami Aug 15 '13 at 21:36
  • You're wrong, it is using the selector to get the element. That is the last p in that list. Try adding another p with no class to that example and it will break. Also, in the comment on Chris's answer that is the last article element, again using the selector to find the element. – Matthew R. Aug 15 '13 at 21:38
  • I know, but again I emphasize that this statement `Pseudo classes target the element and not the class or ID` is wrong. – Hashem Qolami Aug 15 '13 at 21:40
  • 1
    http://stackoverflow.com/questions/4811962/how-to-css-select-element-based-on-inner-html (not possible in css) – captainrad Aug 15 '13 at 21:46
  • @MatthewR. +1 for revising the answer. And sorry, I'm on `"use strict"` mode ;) – Hashem Qolami Aug 15 '13 at 21:52
  • And also it would be great to mention that `Most of those structural (except :root and :empty) pseudo-elements represents the element that is the child or one of its type in the list of children of its parent element` :) – Hashem Qolami Aug 15 '13 at 22:04
  • @Hashem Qolami: The original statement wasn't wrong. A class/ID is simply a property of an element. Every simple selector matches on a per-element basis, pseudo-classes included. – BoltClock Aug 16 '13 at 16:33
  • @Hashem Qolami: As for your last comment, pseudo-elements and pseudo-classes are two different things. Please do not mix these up. – BoltClock Aug 16 '13 at 16:37
  • @BoltClock sorry, my bad. I meant pseudo-classes not elements. but about that sentence, as you said: `A class/ID is simply a property of an element`, and what I wanted was changing the statement in order to indicate this fact better. Sorry for the misunderstanding, I'm not a native english speaker. – Hashem Qolami Aug 16 '13 at 19:38
0

you should use nth child, see here how it works. In your case, it should be:

p.area:nth-child(5){
your style here;
}

For browser support look here.

AdrianS
  • 83
  • 1
  • 1
  • 8