CSS select input where parent isn't 'classname'

Question

I have this rule in my stylesheet:

input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']),
select {
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}

This targets all the text fields on my page but I need to prevent it affecting inputs which are inside an element with a certain class. I'm using ckeditor and need to not affect the fields in the dialog boxes that it creates - this means I can't just overwrite the rule afterwards.

I've tried adding :not(.cke_editor_pageContent_dialog input) but that doesn't work for obvious reasons. I can't seem to find an answer to this anywhere

I can't believe I hadn't thought of that - yes I could, though there's quite a few places where I'd need to add it so it'd be good if there is a way to do it using :not() — ollie
– ollie, Commented Apr 14, 2012 at 11:07
Such a long and complicated selector will quickly become unmaintainable anyways. Might be easier and quicker to add those classes in the long run. — kapa
– kapa, Commented Apr 14, 2012 at 11:10
Yeah, you're probably right. Thanks for the suggestion, if you want to add an answer below I'll accept it — ollie
– ollie, Commented Apr 14, 2012 at 11:13

Tim M. · Accepted Answer · 2012-04-14 11:06:52Z

The right approach might be to go with a "whitelist" approach instead of a "blacklist" approach (telling the browser what not to select).

For one thing, it avoids the problem you are experiencing. Also, the :not() selector does not work in IE8 or lower (not sure if that matters). Lastly (just a guess) I have to believe that complex :not statements are more expensive to evaluate.

I would suggest putting either explicit class names on the elements in question, or better yet, wrapping all the non-editor elements inside an element and using that as a style container.

<div class="myStyles">
    <!-- elements that should be styled -->
    <input type="text" />
</div>

.myStyles input[type="text"]{
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}

I realize that this may require more markup, but it will probably be easier to maintain in the long-term.

kapa · Accepted Answer · 2012-04-14 11:15:41Z

1

Such a long and complicated selector will quickly become unmaintainable in the long run.

It would be much easier and cleaner to add a common class on the elements you want to style the same way.

.text-field {
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}

answered Apr 14, 2012 at 11:15

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Comments

Mr Lister · Accepted Answer · 2012-04-14 11:29:55Z

0

I know the better answer has already been given, but just for the record, and to augment Tim's answer.

If you want to work with inputs that either have type="text" or don't have a type attribute at all, use this selector:

input:not([type]), input[type='text']

answered Apr 14, 2012 at 11:29

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Collectives™ on Stack Overflow

CSS select input where parent isn't 'classname'

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related