CSS selector for ALL elements with SAME CLASS after and before current element

Question

I was looking here: CSS Selector for selecting an element that comes BEFORE another element? ...but wasn't able to find a correct answer for my issue.

Here is a fiddle example: https://jsfiddle.net/Munja/bm576q6j/3/

.test:hover, .test:hover + .test

With this, when I :hover element with .test class, I achieved to change style for current element with .test class and first next element with .test class.

What am I trying to achieve?

When I select any row/column (e.g agent 2), I want to apply same style for ALL elements with that same class (.test in this case).

If it is not possible to achieve this with css only, * I am willing to accept and other good solution.*

Thank you.

@BasvanStein Ah, sorry. What I need is not to apply same css for all classes in tbody.. I need to apply it only for particular elements with .test class in tbody. — Dejan Munjiza, Nov 10 '15 at 12:50
What do you mean by 'selecting' a row or column? Should the user simply hover over it, or click on it? — David Thomas, Nov 10 '15 at 12:56
@DavidThomas let's say that user should only hover it. And every time user hover any element with .test class, ALL .test classes in this table will have new style. — Dejan Munjiza, Nov 10 '15 at 12:58

score 2 · Answer 1 · edited May 23 '17 at 12:33

2

In your specific case you can use

tbody:hover > .test { 
    background: green;
}

fiddle: https://jsfiddle.net/bm576q6j/4/

Note that if you add more classes in the same tbody it will not give what you want. Check also this question: Hover on element and highlight all elements with the same class

edited May 23 '17 at 12:33

Community

1
1

answered Nov 10 '15 at 12:53

Niki van Stein

10,564
3
29
62

Ah, sorry. What I need is not to apply same css for all elements in tbody.. I need to apply it only for particular elements with .test class. – Dejan Munjiza Nov 10 '15 at 12:56
Check, in that case see the link. You can use the `~` operator to get the next siblings, but if you want them all you need to switch to javascript as described in the answer of the linked question. – Niki van Stein Nov 10 '15 at 12:59
Hm I was able to use JS from comment in provided question and it helped me (https://jsfiddle.net/Munja/bm576q6j/13/) but I am going to leave question open for some time so we can see if someone maybe have pure css solution.. Ty – Dejan Munjiza Nov 10 '15 at 13:59
Sure no problem, multiple questions say it is not possible but lets see what people come up with I am curious as well! – Niki van Stein Nov 10 '15 at 14:17

score 1 · Accepted Answer · answered Nov 11 '15 at 09:20

So, after waiting for several more hours, I have decided to use JavaScript solution mentioned in answer from @BasvanStein. Posting it here as answer, to make things easier for someone else with same issue.

Here is a working fiddle: https://jsfiddle.net/Munja/bm576q6j/15/

var elms = document.getElementsByClassName("test");
var n = elms.length;

function changeColor(color) {
    for(var i = 0; i < n; i ++) {
        elms[i].style.backgroundColor = color;
    } 
}
for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
       changeColor("red");
    };
    elms[i].onmouseout = function() {
       changeColor("white");
    };
}

CSS selector for ALL elements with SAME CLASS after and before current element

2 Answers2