CSS selector - select an item based on what it contains

Question

Is there a way to select with CSS only an item based on what it contains? For example, I am looking for something like this:

div:contains(#childDivId) {
    // some code
}

Many thanks for your help

Cheers

You mean select (and style) a parent `div` when one of its children has the required `id`? I don't think that is currently possible with just CSS. — Harry, Sep 05 '14 at 07:10
yes, I know it is easily feasible with jQuery but I am not sure it can be done with css only — Spearfisher, Sep 05 '14 at 07:11

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

This is commonly called a "parent selector", and it doesn't exist in CSS. Even the future plans for a :has() selector indicate that it will only work as a selector from inside JavaScript, evidenced by the fact that it's not included in the "fast profile". So you need JS for this, plain and simple.

edited May 23 '17 at 12:21

Community

1
1

answered Sep 05 '14 at 07:14

ralph.m

12,558
3
19
29

score 1 · Answer 2 · answered Sep 05 '14 at 08:03

1

Unfortunately there is no such thing in css3 yet. But CSS4 got :has() selector. http://www.w3.org/TR/selectors4/

answered Sep 05 '14 at 08:03

BoldClock

31
5

Suresh Karia · Answer 3 · 2014-09-05T07:55:51.683

Unfortunately there are no parent selectors in CSS/CSS3.

The css3 selector "General sibling combinator" could maybe used for what you want:
This matches any F element that is preceded by an E element.

E ~ F { property: value; }

Using Javascript

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

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

CSS selector - select an item based on what it contains

3 Answers3

Unfortunately there are no parent selectors in CSS/CSS3.