How to apply CSS selector on Select Option Child


Tags: html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to remove CSS triangles?

    How to vertically align a form and image

    How to make the submenu to be at the same horizontal as its parent's menu with this css?

    How to disable the collapsing feature in twitter bootstrap 3?

    How is this font face in CSS3 embedded into a css file?

    How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

    How to call in Javascript a requestAnimationFrame loop?

    How do i use floats for images while using
    so that
    still shows under image?

    How do i put text under an img icon in a menu?

    How to let users have the latest non cached code?

    How to create a box having border top width more than content at different browser display size?

    How to hardware accelerate a box-shadow animation in CSS?

    HTML5/CSS3 how to force text to require a certain width for rendering

    how to make changes permanently to css elements with -moz-transform?

    how to create a image slider with help of only HTML and CSS?

    How to make two-coloured stripe using CSS?

    How to make Chrome and IE display block hyperlinks correctly

    How to define the css :hover state in a jQuery selector?

    CSS selectors: how to make element hovering change wrapper's style

    How to remove strange border from css-animated clip-path?

    Show div only on Homepage using only JS & CSS

    CSS - how to dry up?

    How can I have multiply a pixel width value with LESS Css?

    How can I position a web page in the middle of the screen?

    How can I integrate the code from this pen onto my site?

    How to create double, dotted underline for text in css

    How can I disable shrinking/resiziing images in Twitter Bootstrap?

    How to give Internet Explorer different CSS lines?

    How to get 3 div's side by side under an angle

    How do I set a block of text to drop to a new line all at once?