Easy way raise specificity css

The following list of selector types increases by specificity, in ascending order:

1. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
3. ID selectors (e.g., #example).

Universal selector (*), combinators (+, >, ~, ' ', ||) 
and negation pseudo-class (:not()) have no effect on specificity. 
(The selectors declared inside :not() do, however.)

Try to avoid using !important and instead consider:
1. Make better use of the CSS cascade

2. Use more specific rules. 
By indicating one or more elements before the element you are selecting, 
the rule becomes more specific and gets higher priority:

Source: developer.mozilla.org

Similar codes

6 votes118 views6 answers
Css word break
CSS
1 vote116 views1 answer
Css background cover y axis
CSS
0 vote139 views2 answers
How to bring a text in middle center of a tile css in anchor tag inline elements
CSS
4 votes146 views2 answers
How to set text in center in flex item
CSS
0 vote115 views1 answer
Twig date modify
CSS
0 vote129 views1 answer
Patterns with css
CSS
15 votes122 views2 answers
Border-box css
CSS
0 vote71 views1 answer
Set background transparency
CSS
6 votes107 views2 answers
Css grid full width row
CSS
0 vote123 views2 answers
Css space between elements
CSS