How to put more than one class in css not() selector?


Tags: css,css-selectors

Problem :

I would like to stack more than one class in not() selector but ,;: does not work.

input[type=text]:hover:not(.ui-pg-input .mandatory){ background-color: #D9EDF7;}

So, what is proper way to stack classes in css not() selector?



Solution :

Two syntactic alternatives:

  1. use two classes in one :not operator:

input[type=text]:hover:not(.ui-pg-input.mandatory){background-color: #D9EDF7;}

(note the removed blank between the classes)

  1. use the :not operator twice:

input[type=text]:hover:not(.ui-pg-input):not(.mandatory){background-color: #D9EDF7;}

Note however that both have different meaning: the first uses an or operator, so it matches all elements not having both classes (so having none or one), whilst the second uses an and operator, thus matching all elements not having one or the other class (so having none). So it depends on what you want to do...


    CSS Howto..

    How to force modern Internet Explorer to show proper gradient background in real web sites

    How to prevent image in fluid container displayed cropped

    How to center div within col-md-12 in bootstrap

    How do I fill up the remainder of a div with another div?

    How to do this specifically things in CSS for a table

    How to animate multiple elements at the same time?

    How do I change my link's image on click?

    How to specify size of thumbnails for photos that are hosted externally?

    How to replace cycle('float: left', 'float: right') to use pure css?

    Hide/Show Load function now working

    How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

    How to visually re-order elements in a scrolling dropdown input div?

    How to overwrite css animation

    How to add-class and focus the children on keydown function

    How to make this html code and css be in mobile app?

    How to hide a CSS media query from print? “not” logical operator does not work

    How to position the element using absolute position?

    How can I center align the list horizontally?

    How to inherit CSS using Less?

    How to change visibility of a div css to visible with jQuery

    how to make nested flexboxes work

    How to have different transition durations for css and angular transition on same element?

    How to set a css class based on content in rails

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How to make a disabled select box look like a normal text box(css only)

    Fixed sidebar, content under it, how to fix?

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    CSS - how do I float another div over another without overlapping

    How do align texts in the child div

    How do I confer CSS properties upon elements retrieved from $.ajax()?