Is There a CSS Selector for Selecting an Element Futherup in the HTML

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

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, "");
});

CSS Selector Table element of a Cell element

There is currently no way to select the parent of an element in CSS, but the following works with jQuery:

$(".someCell").parents('table').addClass("someClass");

match a parent element

Not currently possible in CSS. Here is a jQuery function that should do the trick:

$('div > p.someclass').each(function(){
    $(this).parent().css('property', 'value');
});

Here is a shorter version of the above example:

$('div > p.someclass').parent().css('property', 'value');

CSS selectors : styling link which contains img

selectors? http://www.w3.org/TR/CSS2/selector.html

You could also use js to target the image file src and then use that to append a class to the link

CSS notation: the meaning of

I think you're looking for a parent selector; sadly this doesn't exist in CSS, so you're out of luck.

This is, from what I understand, mostly for performance reasons -- Jonathan Snook's article goes into a little more detail.

It's either time to change your page generation so that a class or ID gets added to the html element on your "splash" page, or resort to JavaScript, such as the jQuery cssParentSelector library that arkanciscan mentions.

Style parent of text input CSS

Simply put, you cant

(sorry)

CSS works in terms of DOM decendancy, in that rules can only be constructed for elements which appear subsequently in the DOM. As such, you cannot select a parent, or even previous sibling.

What I would tend to suggest is that you sit down, take a step back and work out what you are trying to accomplish. 99% of the time either someone else out there has done it, or you can do it with a minor change to either your CSS or HTML.

Incidentally, a solution would not be to try and style :before or :after on the input, it is a replaced element so such elements do not apply. Why not simply add a label for the input and style it?

---

Related Topics