nth-child does not work in Safari

Question

I'm trying following CSS, it works in Firefox and Chrome but does not work in the Safari (5.1). I have checked Safari supports nth-child. What I'm doing wrong?

CSS:

option:nth-child(2){
  display: none;
}

HTML:

<select>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

Demo: http://jsfiddle.net/Kv9tj/

possible duplicate of [How to style a – uber5001 Jun 26 '13 at 05:28 — uber5001, Jun 26 '13 at 05:28

score 7 · Answer 1 · answered Jun 26 '13 at 05:27

7

You can always use: nth-of-type(2) .

Browser support for :nth-of-type is fairly decent... Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.

I hope this will help you!!!

answered Jun 26 '13 at 05:27

NETCreator Hosting - WebDesign

6,886
3
23
43

2

I was having similar issues with displaying :nth-childs as none, and changing it to :nth-of-type cleared it right up on Safari mobile. – Justin Medas Oct 21 '14 at 14:08

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

I think your problem is not nth-child, but display: none on option.
For example, see this answer: https://stackoverflow.com/a/15025961/39068 (to a similar question).

It says that you can not set display: none on option in Safari or IE.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 26 '13 at 05:30

Andrey Shchekin

21,101
19
94
162

Thanks for your answer. Do you know any alternative solution to remove some option values using CSS only in the safari? – user1251698 Jun 26 '13 at 05:44
Personally I do not know, but it might be impossible to do without JS if the browser does not support it. – Andrey Shchekin Jun 26 '13 at 08:40

nth-child does not work in Safari

2 Answers2

Linked