CSS Style Parent Element

Question

I've got a piece of PHP code that iterates through a database lookup and each iteration adds a option to a parent select element.

I'm able to add column values from the table to the name the class of each option, which i can then refer to by using option[class*="columnvalue"]

I want to set the background color of the select element that the option belongs to.

So in short i'd like: Parent::option[class*="xyz"]

I've seen something about the < operator but this didnt work.

    echo '<select class="dropdown" name="'.$time.'-'.$group.'-'.$iteration.'-'.$new_date.'" >';
$code="";

while ($row = $result->fetch_assoc()) {

              unset($firstname, $lastname);
              $firstname = $row['firstname'];
              $lastname = $row['lastname']; 
              $memberid = $row['memberid'];
              $code = $row['code'];
              echo '<option class="drop" value="'.$memberid.'">'.$firstname . ' ' . $lastname .'</option><option value="cancel-'.$memberid.'">Cancel</option>';
}

The following will apply to the option, but the red background only shows when the drop down menu is expanded, not when selected

 option[class*="drop"]{background-color:red;}

Also tried this (which i dont believe actually is a valid operator select < option[class*="drop"]{background-color:red;}

There is no parent selector in CSS so you;d need to use JavaScript. It's also helpful if you show a code example so we can see exactly what you're after and what you tried. — j08691, May 12 '16 at 20:24
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Quentin, May 12 '16 at 20:34
`:has()` isn't supported [by any browser yet](http://caniuse.com/#feat=css-has) — C14L, May 12 '16 at 20:42
i'm thinking i could use jquery but how would i be able to select an element that's class CONTAINED xyz rather than IS XYZ so the following would satisfy the IS scenario $(".XYZ").parent().css({"color": "red", "border": "2px solid red"}); — Z Holt, May 12 '16 at 20:45

score 0 · Answer 1 · answered May 12 '16 at 20:45

0

The proposed syntax is

select:has(option[class*="drop"]) { background-color:red; }

to select all select tags that contain option[class*="drop"] elements.

But it isn't supported by any browser yet.

answered May 12 '16 at 20:45

C14L

12,153
4
39
52

CSS Style Parent Element

1 Answers1