Targeting with CSS specificity

I came across a situation where I needed to target an element on a page. Not having the ability to modify the JavaScript, nor the ability to add a class to the element I looked around for ways to really get specific and target a single element on the page. What I found: ‘E[foo=”warning”]’ that’s right, brackets in the CSS.

Let’s break it down. In the above example E represents the element you are targeting. This can be a class, id or tag. Example:
#myElement[foo=”warning”] – id
.myElement[foo=”warning”] – class
div[foo=”warning”] – tag

The second part of this statment is two part, the first ‘foo’ represents an attribute (height, width, title, rel, etc..) the second is the value for which you are matching so let’s say we are looking to target an img(s) on the page whose width is 1px and apply a pink border to it you could do something like:

img[width="1"]{
    border: 1px solid #f09;
}

Questions? Leave a comment.

Posted: August 16th, 2011
Categories: Design
Tags:
Comments: No Comments.