CSS – style a link based on its “rel” attribute?

by

Felix Kling and thirtydot suggested to use the [att=val] attribute selector (a[rel="external"]). But this will only work if external is the only rel value.

If you want to style links that could have 1 or more rel values, you should use the [att~=val] attribute selector:

a[rel~="external"] (note the tilde character)

An example for such a link could be:

<a href="http://google.com" rel="external nofollow">LINK</a>

See http://www.w3.org/TR/css3-selectors/#attribute-representation for the specification.

More Related Contents:

  1. Remove blue underline from link
  2. How to make button look like a link?
  3. Difference between @import and link in CSS
  4. Need to remove href values when printing in Chrome
  5. How to keep :active css style after clicking an element
  6. Is there a CSS selector for elements containing certain text?
  7. ::slotted CSS selector for nested children in shadowDOM slot
  8. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  9. Nesting CSS classes
  10. Control the dashed border stroke length and distance between strokes
  11. Is embedding background image data into CSS as Base64 good or bad practice?
  12. Specify an SVG as a background image and ALSO style the SVG in CSS?
  13. Can I change the fill color of an svg path with CSS?
  14. how to reset a CSS variable (aka custom properties) and use the fallback one?
  15. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  16. CSS transitions with calc() do not work in IE10+
  17. Make children divs the height of tallest child
  18. CSS rounded corners in IE8
  19. CSS Best Practice about ID and Class?
  20. Bootstrap 4 card-deck with number of columns based on viewport
  21. What is the em font-size unit? How much is it in pixels?
  22. On IE CSS font-face works only when navigating through inner links
  23. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  24. prevent children from inheriting transformation css3
  25. how to change bootstrap version 4 button color
  26. CSS change d property of
  27. Bootstrap drop down cutting off
  28. How to style the number on a html list?
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. Creating a droplet like border effect in css

Leave a Comment