-3

This example shows in detail... The problem starts with:

.h:hover      { background:red  }
.h:hover ~ td { background:blue }

That works fine: the :hover event selector triggers the following-sibling td element. So, we can say that the ".h:hover triggers ~ td"... But, if the td element has a backward occurrence, there is no selection.
PS: note that the rolspan in the example causes a "layout with a td following-sibling" where structure have a td that is not following.

The only possibility is the #id selector. So, why does CSS not offer some operator or construction to use #id in that constraint?

SUB-QUESTION#1: is there any pure CSS solution?

(edit) Thanks @TylerH to show that sub-question#1 is not a duplicate (!).

The point here is the #id selector in a trigger-event context.

Why CSS3 or CSS4 or "?" standards are not using #id for this kind of application. Are there some standard about CSS events and a better control for manage them?

We know that there is no "previous sibling" selector, and this is an understandable problem with parse algorthims. But "find #id" algorithm (no matter if next or previous!) is so simple and so fast, there are no "parse problem" to adopt #id in a kind of "trigger selector".

SUB-QUESTION#2: there are a standardization iniciative (at CSS WG?) to do some workaround to the problem, using #id as triggered selector?

PS

The HTML label tag and for attibute deal with similar problem. A <label for="for"> not need Javascript to triggers (by click event) its correspondent <input type="checkbox" id="for"> checked... So, we can imagine an on-mouse-over correspondent event triggering in the same way,

label#from1:hover <OPERATOR> #for1 { ...do something... }

at a typical HTML form like this,

<div id="for1">
    <input type="checkbox" id="mycheck"/>
    <span></span>
</div><!-- tag input BEFORE tag label-->
<label id="from1" for="mycheck">Label for my styled "checkbox"</label>
Community
  • 1
  • 1
Peter Krauss
  • 13,174
  • 24
  • 167
  • 304
  • http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector You need javascript. – Jeff Feb 27 '15 at 02:29
  • 1
    CSS has no concept of triggers or events. `.h:hover` doesn't "trigger" the `~ td`, the `td` matches whenever there is a `.h` sibling which is hovered. As for the "for" attribute, the FPWD of Selectors 4 had an idref combinator, but that has been removed from the latest ED. From what I can tell, what you've added to this question should exist as a separate question instead, but it's very unclear to me what is being asked. – BoltClock Feb 27 '15 at 10:24
  • Thanks @BoltClock, very welcome your knowledge about CSS. The sub-question#2 is about CSS's "new technologies and trends"... The objective if to check the *big picture* with people like you that have better knowledge, and the point is to understand **"why [CSS WG](http://www.w3.org/Style/CSS/current-work) was so careless?"**. We can imagine dozens of applications for that kind of "simple id trigger selector" (see my explanation about `.label:hover #for`). – Peter Krauss Feb 27 '15 at 12:34
  • @BoltClock, about your citation of [FPWD of Selectors 4](http://www.w3.org/TR/selectors4/#idref-combinators), now I see what you say... May be the proposal can be to another direction, like the `A B`, that is a "if A exists them selects B" operator. The `` can works as previous-sibling-selector when B is an #id. PS: I edited the question text with a better example in the PS section. – Peter Krauss Feb 27 '15 at 13:18
  • I found a good answer for sub-question#2! see [Selectors Level 4, sec.4.4. The Relational Pseudo-class `:has()`](http://dev.w3.org/csswg/selectors-4/#relational). So the key selector for my PS-example is **`body:has(#from1:hover) #for1`** See [lists.w3.org](https://lists.w3.org/Archives/Public/www-style/2015Feb/0555.html). – Peter Krauss Feb 28 '15 at 00:16
  • @PeterKrauss Yes, just know that, as of now, the `:has()` pseudo-selector is not planned to be included in the fast profile, meaning it **won't** be usable in CSS, only through the DOM via JavaScript or similar languages. – TylerH Feb 28 '15 at 02:07

1 Answers1

3

The ~ selector is called the "general sibling" selector. This means it can only be used to select siblings of the appropriate element. In your case, the #c21 element does not have any siblings (brothers or sisters).

What you are asking for cannot be done with pure CSS, because it requires a parent selector (something like :has() from CSS Selectors Level 4). By "parent selector", I mean the ability to move backward up the DOM to an ancestor element, so that you can then move to the ancestor's sibling, and then to the ancestor's sibling's child element.

Think of it this way: the working selector is a boy selecting his sister. That is OK in CSS-land. However, the not-working selector is a boy trying to select his cousin. This is not OK in CSS-land, because it requires a parent selector. The boy would need to first select his parent, then his parent's brother, and then this parent's brother's son.

The fact that it is an ID rather than a class is irrelevant.

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • Thanks, I edited also my question. Now there are a sub-question#2, that is the "100% not duplicated question", and I was reopening the question. Your answer to the sub-question#1 is perfect (!). I see that you have some knowledge about CSS4... Can we discuss also the sub-question#2? – Peter Krauss Feb 27 '15 at 09:36
  • @PeterKrauss It's probably best for you to ask in the HTML/CSS/Web Design chatroom on Stack Overflow, which I frequent. If I'm not there when you join/ask, just ping me and I will respond when I can. – TylerH Feb 27 '15 at 19:53
  • Thanks @TylerH (!). I am testing the HTML chatroom (nobody there now)... But I found my answer to sub-question#2, see my comment up at the question. – Peter Krauss Feb 28 '15 at 00:23
  • @PeterKrauss Great! If you found this answer solved your initial question, remember to select the checkmark to the left of it so that others know of its usefulness. – TylerH Feb 28 '15 at 02:08