What Browsers Support CSS #Parent > .Direct-Child Notation? (No Jquery)

What browsers support CSS #parent .direct-child notation? (no jQuery)

You can find information for all selectors at http://www.quirksmode.org/css/contents.html
For your questions the supported browsers are the following:

IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf 5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60

Edit: Since it's 2015 I would suggest to have as reference for such questions the can I use? website. For example you can find more info for child selector.

Is there a way to set the CSS of the parent of an element?

No, right now there isn't. There's been talk of this in the WHATWG groups and the like for a long time, but until a year or two ago the browser vendors refused to support any proposals for such selectors because it would slow down CSS rule matching too much due to the way the DOM is parsed.

With advancements in DOM parser engines it is currently considered possible from the browser vendor end, and as such there is a proposal now to include some kind of target selector in CSS4, with even the syntax still under debate. Right now, there's no browser that supports any of the proposed notations, nor is any one of them even ready internally to support such feature.

The current CSS4 Selectors draft mentions the subject specifier, but even contains an explicit note right now that it's undecided whether, if this proposal holds, the ! should be prepended or appended to the selector, or if there should even be 2 of them.

Complex CSS selector for parent of active child

Unfortunately, there's no way to do that with CSS.

It's not very difficult with JavaScript though:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

Is there a CSS parent selector?

There is currently no way to select the parent of an element in CSS in a way that works across all browsers.

That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

li:has(> a.active) { /* styles to apply to the li tag */ }

As of 2022, it is only supported by Safari, and by Chromium browsers behind a flag.

In the meantime, you'll have to resort to JavaScript if you need to select a parent element with full cross-browser support.

How can I style code only if its parent is not pre?

:not(pre) > code { … } should do the job, iff the code element is a direct child of the pre element.

Apply CSS styles to an element depending on its child elements

As far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.

It'd be wonderful if you could do something like div[div.a] or div:containing[div.a] as you said, but this isn't possible.

You may want to consider looking at jQuery. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.

If you use jQuery, something along the lines of this would may work (untested but the theory is there):

$('div:has(div.a)').css('border', '1px solid red');

or

$('div:has(div.a)').addClass('redBorder');

combined with a CSS class:

.redBorder
{
    border: 1px solid red;
}

Here's the documentation for the jQuery "has" selector.

Select all direct descendant dom elements regardless of type

I assume you mean the child selector. It's >, not <.

.parent > *

That will select any element. You can of course use any other selector as the child (an element, class, id, etc.)

CSS Child vs Descendant selectors

Just think of what the words "child" and "descendant" mean in English:

• My daughter is both my child and my descendant
• My granddaughter is not my child, but she is my descendant.

Jquery $(this) Child Selector Not working for some unknown reason

Try:

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $(this).find('.childitem').css({visibility: 'visible'});
});

$("div.parentitem").mouseleave(function(){
    $(this).find('.childitem').css({visibility: 'hidden'});
});

JS Fiddle demo.

How to select only the immediate children of an element in jQuery

Russ Cam inspired me to answer the question again without using an identifier on the table and this is what I came up with:

$("table:not(td > table) > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

Here I select all td's, in every odd row, in tables that are not children of a <td>. Working demo here.

---

Related Topics