CODEWITHSUNDEEP
css
blueFast
blueFast

Reputation: 44501

Apply a class AND an attribute selector

I want to style this element:

<input class="myslider" type="range" value="20">

This is working:

input[class*="myslider"] {
    -webkit-appearance: none;
    width: 100px;
    background-color: black;
    height: 2px;
}

But this is not working:

.myslider input[type=range] {
    -webkit-appearance: none;
    width: 100px;
    background-color: black;
    height: 2px;
}

Why can't I apply a class selector and an attribute selector?

Upvotes: 0

Views: 131

Answers (2)

Kiran
Kiran

Reputation: 20293

Becuase you are selecting input inside .mySlider. Try this:

.myslider[type='range'] {
    -webkit-appearance: none;
    width: 100px;
    background-color: black;
    height: 2px;
}

DEMO

Upvotes: 2

Etheryte
Etheryte

Reputation: 25321

The selector you're looking for is

input.myslider[type=range]

Your current code looks for children elements and doesn't target the appropriate element.

Upvotes: 3

Related Questions