geekone geekone - 3 months ago 23
CSS Question

How to apply CSS selector on Select Option Child

I only want to apply css selector on select option child value. I have an id applied on the selector. Now I want to apply different css on child 1 child 2 and so on so forth

<select name="options[81]" id="select_81" class=" required-entry product-custom-option">
<option value="">-- Please Select --</option>
<option value="229" price="0">ariel </option>
<option value="230" price="0">times new roman </option>
</select>


now I have tried these selectors but nothing works

select#select_81.required-entry.product.custom-option:nth-child(2){
font-family:'Arial';
}

select#select_81.required-entry.product.custom-option:nth-child(3){
font-size:30px;
font-weight:800;
}

#select_81.required-entry.product.custom-option:nth-child(3){
font-size:30px;
font-weight:800;
}

#select_81:nth-child(3){
font-size:30px;
font-weight:800;
}

select#select_81option:nth-child(2), option:nth-child(3) {
font-weight:bold;
}


How can we do this by using CSS?

Answer

That's because you're doing .product.custom-option instead of .product-custom-option.

But your code doesn't need to be that complicated.

To answer your question, to select the nth option, use the :nth-child() selector:

select#select_81 option:nth-child(1) {}
select#select_81 option:nth-child(2) {}
select#select_81 option:nth-child(3) {}
select#select_81 option:nth-child(4) {}
select#select_81 option:nth-child(5) {}
...

But you can't really style the options inside a select dropdown; the system normally gives it default styling that you can't change.