matching links containing part of URL and specific classes

Question

There is a web page with different links on this page. My goal is to find links that contain the following: /dir/flowers/ and have class: flower big

and style them differently (ie. make these links red color).

Here are the example links that should match:

<a class="flower big" href="http://example.net/dir/flowers/spring.php">Spring</a> 
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Winter</a>    
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Fall</a>

etc.

So if a link contains: /dir/flowers/{*} and has class:"flower big" then it should be matched.

I tried something like below but it's not working:

(a[class="flower big"] AND a[href~="/dir/flowers/"] ) {color:red} 

Answer 1

You can use 2 CSS attribute selectors

1. [class^="flower big"] with the ^ will look for any element with an attribute name of class and whose first value is prefixed by "flower big".

2. [href*="/dir/flowers/"] with * which will look for any a with an attribute name of href and whose value contains at least one occurrence of string "/dir/flowers" as substring.

---

a {
  display: block
}
[class^="flower big"][href*="/dir/flowers/"] {
  color: red;
}

<a class="flower big" href="http://example.net/dir/flowers/spring.php">Will be red because has both classes in order and /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Will be red because has both classes in order and /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Will be red because has both classes in order and /dir/flowers/</a>
<a class="plant big" href="http://example.net/dir/flowers/spring.php">Won't be red because hasn't classes in order even having  the /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/foobar/fall.php">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>

---

UPDATE

If by any chance you want to have more classes inside that a or change the order of those 2 classes then you need to select the a in CSS differently, something like .flower.big or .big.flower will do it.

a {
  display: block
}
.big.flower[href*="/dir/flowers/"] {
  color: red;
}

<a class="flower big foobar" href="http://example.net/dir/flowers/spring.php">Will be red because has both classes in link and /dir/flowers/</a>
<a class="big flower" href="http://example.net/dir/flowers/winter.php">Will be red because has both classes in link and /dir/flowers/</a>
<a class="foo bar classes big flower" href="http://example.net/dir/flowers/fall.php">Will be red because has both classes in link and /dir/flowers/</a>
<a class="plant big" href="http://example.net/dir/flowers/spring.php">Won't be red because hasn't classes in link  even having  the /dir/flowers/</a>
<a class="flower big" href="http://example.net/dir/foobar/fall.php">Won't be red because hasn't the /dir/flowers/ even having the correct classes</a>

Answer 2

Try this:

.flower.big[href*="dir/flowers"]{
  color:red;
}

<a class="flower big" href="http://example.net/dir/flowers/spring.php">Spring</a>

<a class="flower big" href="http://example.net/dir/flowers/winter.php">Winter</a>

<a class="flower big" href="http://example.net/dir/flowers/fall.php">Fall</a>

<a class="flower big" href="http://example.net/dir/other/fall.php">other</a>

<a class="otherClass otherClass" href="http://example.net/dir/other/fall.php">other too</a>

"*=" means "match the following value (dir/flowers in this case) anywhere in the attribute value (href in this case)"