0

There are two type of links in a webpage. One type of link contains class and itemprop both in it and the other only contains class in it. In the below links, the first one is with both class and itemprop and the second one is with only class. However, if I want my selector not to select links with "itemprop" in it, how would that selector look like? 

<a href="/los-angeles-ca/mip/crispy-crust-hollywood-location-443529?lid=1000226108758" itemprop="name" class="business-name"></a>

<a href="/los-angeles-ca/mip/casa-bianca-pizza-pie-13519?lid=1000203432051" data-analytics="{&quot;target&quot;:&quot;name&quot;,&quot;feature_click&quot;:&quot;&quot;}" rel="" class="business-name" data-impressed="1"></a>

I've tried with the below one but it selects all:

a.business-name

when I tried with this, it selects only the links with both item:

a[itemprop="name"].business-name

When I tried with this to get only the class in it, it doesn't work:

a[not(itemprop="name")].business-name
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
SIM
  • 21,997
  • 5
  • 37
  • 109

2 Answers2

1

I think there is a little syntax change needed. This could do the job

a.business-name:not([itemprop="name"])
Sidtharthan
  • 197
  • 9
  • Thanks Sidtharthan, for your answer. It works. One last thing to know from you - what is the or operator in css selector, as in "|" is for xpath. – SIM Jul 25 '17 at 13:24
  • This thread has more info on OR and AND operators. https://stackoverflow.com/a/2797098/5909393 It may help you. – Sidtharthan Jul 25 '17 at 13:45
1

The conventional solution is to use specificity and the cascade:

With specificity, you can declare that the style for

a.business-name[itemprop]

is the same as the style for

a

Further down the cascade you can declare the distinct style for

a.business-name

Since the last selector is less specific, it will not override the more specific selector higher up the cascade.

a {
display: block;
line-height: 32px;
font-size: 16px;
}

a, a.business-name[itemprop] {
color: red;
font-weight: normal;
}

a.business-name {
color: green;
font-weight: bold;
}
<a href="#">Random Normal Link</a>

<a href="/los-angeles-ca/mip/crispy-crust-hollywood-location-443529?lid=1000226108758" itemprop="name" class="business-name">Link with itemprop</a>

<a href="/los-angeles-ca/mip/casa-bianca-pizza-pie-13519?lid=1000203432051" data-analytics="{&quot;target&quot;:&quot;name&quot;,&quot;feature_click&quot;:&quot;&quot;}" rel="" class="business-name" data-impressed="1">Link without itemprop</a>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 1
    Thanks Rounin for your answer. You solved my another problem as well. Perhaps this "comma" which is considered as the "or" operator in css selector which i found in your code. – SIM Jul 25 '17 at 13:42
  • 1
    Yes, the comma is the `or` operator in CSS. :-) – Rounin Jul 25 '17 at 13:48