Geek Answers Handbook

How to make css selectors with the same specificity applicable in the order of HTML tags?

There are many CSS styles at the same level and HTML code with nested blocks that apply styles:

.style1 a { color: red; } .style2 a { color: green; } 
 <div class="style2"> <span> <a href="/">Style 2</a> </span> <div class="style1"> <div> <a href="/">Style 1</a> </div> <div class="style2"> <a href="/">Style 2</a> </div> </div> </div>

As a result, the second link ("Style 1") turns green. This is because the link tag has the same specificity for both CSS selectors, and .style2 a declared later, so .style2 a is applied.

How to make a style be applied from the nearest parent of a style class without preliminary information on nesting tags (so that the second link is red)?

Playground Code: http://codepen.io/anon/pen/zvXmOw

HTML is subject to change . But keep in mind that links can be anywhere.

----------

The best solutions I've found are based on the utmost investment. The first (the link tag’s distance from style-parent is limited):

 .style1 > a, .style1 > :not(.style) > a, .style1 > :not(.style) > :not(.style) > a { color: red; } .style2 > a, .style2 > :not(.style) > a, .style2 > :not(.style) > :not(.style) > a { color: green; } 
 <div class="style style2"> <span> <a href="/">Style 2</a> </span> <div class="style style1"> <div> <a href="/">Style 1</a> </div> <div class="style style2"> <a href="/">Style 2</a> </div> </div> </div>

Second (nesting style of divs is limited):

 .style1 a, .style .style1 a, .style .style .style1 a { color: red; } .style2 a, .style .style2 a, .style .style .style2 a { color: green; } 
 <div class="style style2"> <span> <a href="/">Style 2</a> </span> <div class="style style1"> <div> <a href="/">Style 1</a> </div> <div class="style style2"> <a href="/">Style 2</a> </div> </div> </div>

I am trying to find out if there is a better solution without limits.

+6
source share
4 answers

How to make css selectors with the same specificity applicable in the order of HTML tags?

You can not. CSS just doesn't work. If selectors have the same specificity, then the rules apply in the order of styles. You cannot change this.

Perhaps you can achieve the desired effect using color: inherit in the links and set colors for elements that are members of classes.

It might be easier to set classes directly on anchors.

+2
source

This can be achieved using CSS variables :

 a { color: var(--link-color); } .style1 { --link-color: red; } .style2 { --link-color: green; } 
 <div class="style2"> <span> <a href="/">Style 2</a> </span> <div class="style1"> <div> <a href="/">Style 1</a> </div> <div class="style2"> <a href="/">Style 2</a> </div> </div> </div>

Unfortunately, this technology is not widely supported by browsers. According to May I use , 93% of browsers support it.

+2
source

This is a problem of definitions. It’s better to make a .green link that will make a div with a .green classname to apply to its children. Good CSS practices say it's better to do this:

  <a href="" class="green">Green link</a> <a href="" class="red">Red link</a>

It doesn't matter where they are. If specific styles are used for links, why not write good code for them?

0
source

The best would probably be to remove the span and div like this:

 <div class="style2"> <a href="/">Style 2</a> <div class="style1"> <a href="/">Style 1</a> <div class="style2"> <a href="/">Style 2</a> </div> </div>

And then use this CSS:

 .style1 > a { color: red; } .style2 > a { color: green; }

Fiddle: http://jsfiddle.net/09c6x5pp/

EDIT:

If you want to keep span and div:

 .style1 > a, .style1 > div > a { color: red; } .style2 > a, .style2 > span > a { color: green; }
0
source

More articles:


All Articles