...
Clever Geek Handbook

: no selector in css doesn't apply

I have similar markup in mine 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 are inside an element div

that is also sibling with at least one a

(anchor) element. Therefore, I use the selector css

:

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 he doesn't choose anything. I have a red one here that the selector :not

cannot handle complex variations, so I removed part of it [type='hidden']

, although it still doesn't work.

I manage to get some work done:

  • Add class

    to all goals input[type='text']

    .
  • Use this selector: div > input[type='text']

But if you can give me a selector for my requirements, I would be very grateful. Thank.

+3


source to share


2 answers


Change your css selector instead:

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


Update : to select only input fields

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


source


you could provide text inputs class

, that would be the simplest solution, but I think this is not an option based on what you are asking this question.

These are a few selectors you could use:

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

or, as you mentioned, class

to yours hidden

, which will provide you with this selector:



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

Or, in the event that you know the exact location (this means that the text input is always 3rd), you can do this:

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


source






More articles:


All Articles