CODEWITHSUNDEEP
htmlcss
Gideon
Gideon

Reputation: 1507

:not selector in css is not applied

I have a similar markup in my html:

<div class="...">
    <a href="...">...</a>
    <input type="hidden" name="...">
    <input type="text" name="...">
    ...
    <div class="...">
        <a href="...">...</a>
        <input type="hidden" name="...">
        <input type="text" name="...">
    </div>
    <div class="...">
        <a href="...">...</a>
        <input type="hidden" name="...">
        <input type="hidden" name="...">
        <input type="text" name="...">
    </div>
    <input type="text" name="...">
    <input type="text" name="...">
    ...
    <input type="hidden" name="..."> 
    <div class="...">
        <a href="...">...</a>
        ...
        <input type="text" name="...">
    </div>
</div>

And I want to assign css style only to input[type='text'] elements that is inside a div element that is also a sibling of at least one a(anchor) element. So I use these css selector:

div > a ~ :not(input[type='hidden']) { /* css style */ }
div > a ~ input:not(input[type='hidden']) { /* css style */ }
div > a ~ input[type!='hidden'] { /* css style */ }

But it doesn't select anything. I've red here that the :not selector cannot handle complex selections so I removed the [type='hidden'] part of it, though it still doesn't work.

I manage to do some work-around like:

But if you can give me the selector for my requirements, I would be most grateful. Thanks.

Upvotes: 3

Views: 106

Answers (2)

Mark
Mark

Reputation: 6855

you could give the text inputs a class, that would be the easiest solution, but i'am thinking that this is not an option based on the fact you are asking this question.

This are some selectors you could use:

.classname {}
div > a ~ input:not([type='hidden']) {}

or as you mentioned, a class to your hidden, that would give you this selector:

div > a ~ input:not(.classhiddeninputs) {}

Or in the case you know the exact location (meaning, the text input is always the 3th), you could do this:

div input:nth-of-type(3) {}

Upvotes: 1

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

Change your css selector to this instead:

div > a ~ :not([type='hidden']) { background: #000 }

Update: to select only the input fields

div > a ~ input:not([type='hidden']) { background: #000 }

Upvotes: 3

Related Questions