CODEWITHSUNDEEP
htmlcsscss-selectors
Kline
Kline

Reputation: 47

CSS - Using selectors in :not

.formSec .formWrap input[type="text"]:not(.counter input[type="text"]):not(other){
   width:80%;
   text-align:left;
}

I am trying to use :not so that all the input boxes in the formWrap class are 80% with the exception of input boxes that are contained within the .counter class.

I must keep the counter class in the parent div it cannot be applied to the input boxes and I also do not want to apply a class to the excluded input box, is this possible?

<div class="formSec">
<div class="formWrap counter">
<input type="text" size="4" maxlength="4" />
</div>
<div class="formWrap">
<input class="other" type="text" size="4" maxlength="4" />
</div>
<div class="formWrap">
<input type="text" size="4" maxlength="4" />
</div>
</div>
</div>

This is the HTML I need to preserve so only the second input would be 80%.

Upvotes: 2

Views: 86

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99464

CSS :not() negation pseudo-class only accepts a simple selector as an argument where it should not contain another :not() pseudo-class or any pseudo elements. Also Combinators are not allowed. This means that .counter input[type="text"] is NOT a valid argument.

Spec from CSS Selectors level 3:

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

You could select .formWrap elements which don't have .counter class by .formWrap:not(.counter) and then target the nested <input> elements excluding those who have .other class by input[type="text"]:not(.other) as follows:

Example Here

.formSec .formWrap:not(.counter) input[type="text"]:not(.other) { /*
                  ^----     No spaces here     ----^              */
   width:80%;
   text-align:left;
}

(Check the revisions for the old answer which was based on the old markup)

Upvotes: 3

Darshak Shekhda
Darshak Shekhda

Reputation: 646

i think you want to do like this 

.formSec .formWrap input[type="text"]{
    width: 100%;
}
.formSec .formWrap .counter input[type="text"]{
    width:80%;
    text-align:left;
}
<div class="formSec">
    <div class="formWrap">
        <div class="counter">
            <input type="text" size="4" maxlength="4" />
        </div>
        <input type="text" size="4" maxlength="4" />
    </div>
</div>

Upvotes: 0

Related Questions