How to use css :not() selector

In CSS, the not selector is used to match each element of the non-specified element/selector, the syntax format is ":not(selector)". The not selector can set the style for each non-specified element. For example, ":not(p){background:red;" is to set the background color for each element that is not a p element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

:not() selector is used for the presentation of some special functions. Let me give you an example of what I use:

When your mouse hovers over These labels will change color just like the second label.

When you click on the first one, label "Asset Sector", and then hover the mouse over it, you don't want this special effect.

How to implement this change?

It’s very simple. This problem can be easily solved by using the &:not() selector.

Definition on W3CSchool:

: The not(selector) selector matches each element of the non-specified element/selector.

See what operations I do to achieve the above effect.

Original code:

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
  &:hover{
    background-color: @pr-light-grey-7;
  }
}

Changed code:

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
}
 
 
.pr-pos-box_tab:not(.pr-pos-box_tab--selected) {
  &:hover{
    background-color: @pr-light-grey-7;
  }
}

Do you see the difference?

Yes~I used not(.pr-pos-box_tab--selected) to prevent hover from affecting the pr-pos-box_tab--selected tag

The effect after the change Picture:

(Learning video sharing: css video tutorial)

The above is the detailed content of How to use css :not() selector. For more information, please follow other related articles on the PHP Chinese website!