CSS - Select an specific element inbetween elements

Question

I'm trying (and also did search here) to select a specific element without any success:

<form id="filterForm">
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
   <div class="optioncontent">
       <div>

The element I'd like so select via CSS is the ver last div with the class filterOption filterSection. I tried:

.filterSection:last-of-type
.filterSection:last-child
.filterSection:last-of-type
.filterSection:last-child

Any idea on how this could be achieved? Help would be great!

There is no [`:last-of-class` pseudo class](http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i) in CSS selectors. Therefore there's no versatile way to select the last element having a certain class, in CSS. — Hashem Qolami, Oct 09 '14 at 09:56
You can't use `nth-of-anything` to select by **class**. It only selects elements. There may be a **specific** solution based on actual location for your **specific** structure but it will not be flexible. — Paulie_D, Oct 09 '14 at 09:58

score 0 · Answer 1 · answered Oct 10 '14 at 02:29

Actually i don't know what you want, it's that using your half code to select specific one or select the last one? If that would be the following:

.filterOption.filterSection:nth-child(1){
    background-color:yellow;
}
.filterOption.filterSection:nth-child(2){
    background-color:red;
}
.filterOption.filterSection:nth-last-child(2){
   background-color:grey;
}

<form id="filterForm">
<div class="filterOption filterSection">1</div>
<div class="filterOption filterSection">2</div>
<div class="filterOption filterSection">3</div>
<div class="optioncontent">
<div>

Here's http://jsfiddle.net/ianwong/p3s62rrm/

If you want to select from the strict closed code, you can click http://jsfiddle.net/ianwong/p3s62rrm/1/

score 0 · Answer 2 · answered Oct 10 '14 at 11:33

Thank you all for your respond with help.

As Paulie_D mentioned it wont be flexible, but my code is dynamic (div class="filterOption filterSection") . And as Hashem Qolami wrote it's not possible.

I also tried :nth-last-child(1) as wong ian and ghorg12110 mentioned but it wont work as I have more child div's in div class="filterOption filterSection" and need to select the last parent div class="filterOption filterSection".

So I ended up adding an empty div in my php-code right at the end with the css-style I needed.

Not nice, but works for now.

score -1 · Answer 3 · answered Oct 09 '14 at 09:50

-1

You can try with the css3 property :

.filterOption.filterSection:nth-last-child(1);

answered Oct 09 '14 at 09:50

ghorg12110

36
6

Like this : .filterOption.filterSection:nth-last-child(1) – ghorg12110 Oct 09 '14 at 09:54

score -1 · Answer 4 · answered Oct 09 '14 at 10:11

You can use the :last-of-type selector as you can see in this Fiddle

So that you can select

<form id="filterForm">
    <p class="filterOption filterSection">NO</p>
    <p class="filterOption filterSection">NO</p>
    <p class="filterOption filterSection">NO</p>
    <p class="filterOption filterSection">ME!</p>
    <div class="blablabla"></div>
</form>

with this css

.filterOption:last-of-type { color:red }

According to the W3C there's also a :last-child selector as you can check HERE but it didn't work in JSFiddle.

CSS - Select an specific element inbetween elements

4 Answers4