THE AMAZING POWERS OF CSS

By Ilmari Heikkinen at 20 June, 2012

fun code css hack

Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible:

a[href = ""] {
  background: red;
  color: white;
  font-size: x-large;
}

Check out the live example at jsFiddle

You can also style absolute links differently from relative links:

a[href ^= http] {
  display: inline-block;
  color: red;
  transform: rotate(180deg);
}

Check out the live example at jsFiddle

If you want to have a different style for links pointing out of your domain, you can use the :not() selector. This is actually how we do the little arrows next to external links at HTML5Rocks.

a[href ^= 'http']:not([href *= 'html5rocks.']) {
  background: transparent url(arrow.png) no-repeat center right;
  padding-right: 16px;
}

Check out the live example at jsFiddle

Just to remind you that you’re not limited to styling links, here’s how to make all PNG images inverted:

img[src $= .png] {
  filter: invert(100%);
}

Moving on from attribute selectors, did you know that you can make the document head visible, along with the other elements there?

head {
  display: block;
  border-bottom: 5px solid red;
}
script, style, link {
  display: block;
  white-space: pre;
  font-family: monospace;
}

Or that you can use the awesome power of CSS attr-function to fill in the :after and :before content?

script:before {
  content: “<script src=\”“ attr(src) “\” type=\”“ attr(type) “\”>”; 
}
script:after {
  content: “</script>”;
}




 

style:before {
  content: “<style type=\”“ attr(type) “\”>”; 
}
style:after {
  content: “< /style>”;
}


 

/* And for a finish,  */
link:before {
  content: “<link rel=\”“ attr(rel) “\” type=\”“ attr(type) “\” href=\”“ attr(href) “\” />”;
}

Check out the live example at jsFiddle

Note that attr() reads in the attribute values of the matching element, so if you use it for #foo:before, it reads the attributes from #foo.

Source: http://updates.html5rocks.com/2012/06/The-amazing-powers-of-CSS