How do I set multiple elements' css in one page without the :not attribute?


Tags: css

Problem :

Recently I discovered the :not attribute in CSS. It's not a huge deal that it's not recognized in all browsers and has worked in most situations, but it now seems that I'm overusing it and I don't know how to stop. My CSS ends up looking a mess.

#div input:not(.custom-combobox-input):not(.k-input):not([type='button']):not(#coordinates>input), select 
{
    width:200px !important;
    text-indent: .33em;
    border-radius:4px;
    height:24px;
}

What's a better way to set CSS properties on elements that you will have many different versions of in the same page?



Solution :

I think it's a good practice to use a base class which carries all the style rules which all the elements have in common, then start customizing certain elements by adding a second class. Imagine you have a .message-element that delivers system messages to the user. These messages can be for pure information purposes (hints), they can tell the user taht something has worked fine, they can hold warning messages and sometimes even error messages. For this use case I'd suggest the following:

.message {
  padding: 1em;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 24px;
  line-height: 30px;
  box-shadow: 0 0 5px #000;
  margin: 30px;
}

.message.confirmation {
  background-color: green;
  color: white;
}

.message.warning {
  background-color: yellow;
  color: black;
}

.message.error {
  background-color: #a00;
  color: white;
}
<div class="message">Message with no special meaning or styling.</div>
<div class="message confirmation">You've done it!</div>
<div class="message warning">Please check your configuration, something seems to be odd.</div>
<div class="message error">You've got it all wrong!</div>


    CSS Howto..

    How to include CSS in laravel 5 running with artisan?

    How to fix the alignment of my sub-menu

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

    How do I create a border for an image?

    How to embed a php/javascript photogallery in a page of an html/css website?

    How to create a card flip effect on DIV using javascript

    How to add my custom css class to a html element

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How to prevent the CSS `:before` text being editable while the `div` itself is editable?

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    How do I make two divs in the same “row” float in different directions?

    how to disable width: 100%; and box-sizing: border-box;

    How can the css dottled border be implemented?

    How to apply table cell formatting using CSS

    How to increase the width of my template? [closed]

    How to make this arrow in CSS only?

    How to program the navigation bar(image) web html

    How do I display the first image from each div with .className?

    How to align a Wordpress navigation bar to the right of a logo?

    How to select with css specific id only if have specific class on same div?

    Showing HTML page with CSS attached in a WebView

    How to add custom layout and css in a CakePHP application?

    How can I make sure that the footer will always be on the bottom of the last page when printing out?

    CSS floats - how do I keep them on one line?

    How to use Javascript in a innerHTML inline css scenario?

    How to position heading (h1) placed on a background image and centered according to it outside of its container

    CSS. How to add small image on background?

    how to make slide animation?

    How to cancel out .table width:100% in bootstrap css

    How I can write CSS for IE. My code not work in IE10 nor 9,7,8?