14

CSS select input where parent is not 'classname'

 2 years ago
source link: https://www.codesd.com/item/css-select-input-where-parent-is-not-classname.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

CSS select input where parent is not 'classname'

advertisements

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

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK