target only determined links with a rel atribute

Question

I checked the special selection of input elements as shown here. I tried to apply this to select all links except a link which has a rel atribute. Here you have the example:

CSS

.language a:not[rel=author]{
    background: red;
}

HTML

<section class="language">
   <a href="/en/">
       <abbr lang="en" title="english">EN</abbr>
   </a>
   <a href="/spa/">
       <abbr lang="es" title="english">ES</abbr>
   </a>
   <a href="http://whatever.com/" rel="author">Designed by me</a>
</section>

I would like only to target the first two links. I would like to avoid a class and try to target them with CSS.

score 2 · Accepted Answer · answered Nov 05 '13 at 12:14

2

Do it like that:

.language a:not([rel=author]){
    background: red;
}

You just forgot parentheses after :not

answered Nov 05 '13 at 12:14

Ricky Stam

2,028
21
25

score 1 · Answer 2 · answered Nov 05 '13 at 12:15

1

Select all anchors that don't have a rel attribute:

.language a:not([rel]){
    background:#F00;
}

JSFiddle

answered Nov 05 '13 at 12:15

George

35,662
8
61
98

score 1 · Answer 3 · answered Nov 05 '13 at 12:15

1

Just target the attribute...

.language a abbr[title="english"] {
   /* woohoo! */
}

answered Nov 05 '13 at 12:15

Paulie_D

102,164
10
117
144

score 1 · Answer 4 · edited May 23 '17 at 12:21

Instead of the [att=val] attribute selector, you should use the [att~=val] attribute selector:

.language a:not([rel~=author]){
    background: red;
}

[rel~=author] also matches if author is not the only value of the rel attribute. So it matches links like:

<a href="http://whatever.com/" rel="author">Designed by me</a>
<a href="http://whatever.com/" rel="author external">Designed by me</a>
<a href="http://whatever.com/" rel="author external nofollow">Designed by me</a>
<!-- … -->

target only determined links with a rel atribute

4 Answers4