Is there a css selector for selecting an element futherup in the html?

by

Update: The subject specifier appears to have been removed from the Editor’s Draft, 6 May 2014 of the Selectors Level 4 specification. This leaves no way to achieve this using CSS.

Selectors Level 4 introduces the subject specifier which allows:

!h2 + a img:hover { }

to select the <h2>.

Browser support is, AFAIK, currently non-existent.

You can simulate it in JavaScript (the following is untested, but should give you the idea).

var img = document.querySelector('h2 + a img');
img.addEventListener('mouseover', function (e) {
    this.parentNode.previousElementSibling.className += " hovered";
});
img.addEventListener('mouseout', function (e) {
    this.parentNode.previousElementSibling.className = this.parentNode.previousElementSibling.className.replace(/\shovered/g, "");
});

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. CSS negation pseudo-class :not() for parent/ancestor elements
  4. How can I select the last element with a specific class, not last child inside of parent?
  5. Are class names in CSS selectors case sensitive?
  6. Why doesn’t table > tr > td work when using the child selector?
  7. CSS selector by inline style attribute
  8. Matching the first/nth element of a certain type in the entire document
  9. :last-child not working as expected?
  10. Using :before and :after CSS selector to insert HTML [duplicate]
  11. :nth-child(even/odd) selector with class [duplicate]
  12. How to CSS: select element based on inner HTML [duplicate]
  13. What is the performance impact of the universal selector?
  14. What are the priorities among CSS selectors
  15. Why is nth-child selector not working?
  16. CSS selector with period in ID
  17. Can a ::before selector be used with a ?
  18. Is it possible to use CSS vars in CSS3 selectors?
  19. What is the ::content/::slotted pseudo-element and how does it work?
  20. CSS Selector “(A or B) and C”?
  21. How to get CSS to select ID that begins with a string (not in Javascript)?
  22. How do I select an element that has a certain class?
  23. Selecting the last element among various nested containers
  24. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  25. Zebra striping a flexbox table with wrapping items
  26. CSS attribute selector does not work a href
  27. How to use nth-child for styling with a table with rowspan?
  28. CSS Selector for No-Children-But-Not-Empty
  29. How to select classes with spaces
  30. CSS nth-match doesn’t work

Leave a Comment