Search code examples
htmlcssrel

target only determined links with a rel atribute

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.

Solution

  • Do it like that:

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

    You just forgot parentheses after :not