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

Answer 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;
}