A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it. Style visited and unvisited links differently. Style an element when it gets focus.
And the general principle of html and css holds good – the order in which children are placed in the tree is important. Children located top to bottom in code are placed left to right in the tree.
So effectively the above means that by default the link will be color:red but as soon as I mouse hover on the link, it will be turned hotpink. Similarly, once I click on the link to visit the link, it will be permanently turned to green.
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
https://www.w3schools.com/css/css_pseudo_classes.asp
And the general principle of html and css holds good – the order in which children are placed in the tree is important. Children located top to bottom in code are placed left to right in the tree.
Set a background color for all elements that are not a
element:
:not(p) {
background: #ff0000;
}
The :not(X) property in CSS is a negation pseudo class and accepts a simple selector as an argument. Essentially, its just another selector of any kind. :not matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.
A simple selector is classified as a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector.
In this example we have an unordered list with a single class on the li:
<ul>
<li></li>
<li class="different"></li>
<li></li>
</ul>
Our CSS would select all the
- elements except the one(s) with a class of .different.
Style everything but the
.differentclassli:not(.different) { font-size: 3em; }
The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.
Negations may not be nested so :not(:not(…)) is never permitted. Authors should also note that since pseudo elements are not considered a simple selector, they are not valid as an argument to :not(X). Be mindful when using attribute selectors as some are not widely supported as others. Chaining :not selectors with other :not selectors is permissible.
An interesting real-world example
In the context of
mat-slide-toggleVery starangly the below one WAS ONLY working with!important. Here all I wanted to do when mat-checked or mat-toggled then,.mat-slide-toggle.mat-checked .mat-slide-toggle-bar { background-color: $light-text-color !important; } .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { background-color: mat-color($sd-theme-primary, 400) !important; }
And the reason of using
!importanthere was – we have used ViewEncapsulation.None in the relevant component where I was invokingmat-slide-togglemaking the .scss styles in this component global to the whole application.We could avoid
!important, by using /deep/ (which is deprecated) or ::ng-deep (which will also be deprecated in future) in the local component’s css files but both these implementations are not recommended.But then looking at mat-slide-toggle’s source code – It seems like we should not need to use !important,
material/slide-toggle/_slide-toggle-theme.scss#L12
They are not using
!important. So why do we need it?SO I CHANGED AS BELOW AND IT WORKED – WHEN I BROUGHT IN EXTRA selector .mat-disabled. So in below I am saying, in addition to the other class selector, IT ALSO SHOULD NOT BE
.mat-disabled.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { background-color: $light-text-color; }
Flexbox Layout (Flexible Box)
