0

I want to apply styles to select input elements only if they have an option:checked. It seems to me that this isn't possible using css only. (I am aware that there's no parent selector)

select:pseudo-class-here {
    background-color:red;
}
Quisse
  • 646
  • 1
  • 6
  • 24
  • Why select tag has option checked? Did you mean selected state? – Hien Nguyen Feb 27 '19 at 09:11
  • Share your code here – Nithya Rajan Feb 27 '19 at 09:11
  • Yes i mean selected state. – Quisse Feb 27 '19 at 09:11
  • show us what you have tried? – Abhishek Pandey Feb 27 '19 at 09:11
  • https://www.w3schools.com/cssref/sel_checked.asp – לבני מלכה Feb 27 '19 at 09:14
  • 3
    What do you mean by `selected state` ? – samb102 Feb 27 '19 at 09:15
  • @HienNguyen — The name of the CSS pseudo-class is `:checked`, not `:selected` – Quentin Feb 27 '19 at 09:17
  • "I'm not asking if there's a parent selector!" — Yes, you are. Your question was much clearer before you started editing it, but you are asking to select a ` – Quentin Feb 27 '19 at 09:18
  • 1
    Maybe you are looking for a combination of `required`, and `:valid`/`:invalid` pseudo classes …? – 04FS Feb 27 '19 at 09:19
  • @Quentin It could be solved if there's an `parent` selector indeed, but wouldn't it be better if there's an `:selected` pseudo class on the `select` element? – Quisse Feb 27 '19 at 09:23
  • @Quisse did you tried this way `option:checked { Your style }` or `select option:selected`? – soorapadman Feb 27 '19 at 09:24
  • @soorapadman — Those would select the option element not the select element. – Quentin Feb 27 '19 at 09:27
  • @Quentin, I now get why the pseudo class isn't possible. A `select` element always has an `option` selected. Maybe unmark this question as duplicate so i can answer this? – Quisse Feb 27 '19 at 09:30
  • "I want to apply styles to select elements only if they have a selected state" quite a funny one IMO since select always selecting something if they had option. – Mukyuu Feb 27 '19 at 09:30
  • @Mukyuu yes that was the answer I was looking for. – Quisse Feb 27 '19 at 09:32
  • 1
    @Quisse – ` – Quentin Feb 27 '19 at 09:32
  • 1
    @Quentin Interesting, so u still think this is duplicate to 'Is there a CSS parent selector'? The answers don't look like it and to me it seems that this is a question about the select element and not about css selectors in general. Too bad. – Quisse Feb 27 '19 at 09:37
  • Not the select element does get selected, individual options do. So you can not use `select:selected`, but you _would_ need something to make the formatting of the parent (select) dependent on the state of children (options) … and that pretty much closes the circle to the duplicate, which explains that that possibility does not currently exist in CSS. – 04FS Feb 27 '19 at 10:01
  • @04FS so I'm the only one thinking that your answer is a much clearer explanation to the question than marking as duplicate? – Quisse Feb 27 '19 at 10:12
  • 1
    @Quisse That is because your question still isn't clear. For all we know you need `:focus-within` instead of `:selected`. Rather than complaining about the closure, edit the question to make it obvious what you're asking. – Mr Lister Feb 27 '19 at 12:10
  • @MrLister thanks for the constructive feedback. I'll try to be more obvious in my questioning. – Quisse Feb 27 '19 at 12:30
  • @Quisse OK. One problem was that there are distinct answers for , another that "select with a selected option" is not the same as "select with an option that has the `selected` attribute", so it's good to have cleared that up – Mr Lister Feb 27 '19 at 13:01
  • @MrLister indeed it's good. Anything else not clear/I can improve in my question? I already know the answer & have an assumption what the reason is. The only point I'm continuing this thread is to prevent others from running into this. – Quisse Feb 27 '19 at 13:15

1 Answers1

0

No there is no such pseudo-class. Could be because a regular select element always has an option selected. This is not the case on select multiple elements.

Quisse
  • 646
  • 1
  • 6
  • 24