330 Locust Dr.
Verona, WI 53593
Powderkeg Web Design
Message Us

Under-used and Under-appreciated CSS Selectors Part 2 of 3

March 27, 2017

CSS is a vast ocean of possibilities. There are dozen different ways to accomplish the look/feel of a design. Lost in this sea of colors, fonts, and positions are a few under-used and under-appreciated selectors. Today we’re going to cover batch 2 of my 3 favorites. See part 1 here where we covered the immediate sibling selector.

*We’re making the assumption that we are all now using modern web browsers with the latest CSS specs.

2. Attribute Selectors

You can target elements that have a specific ( or generic ) attribute. For instance, you can target all links that have a target attribute:

Or you can be more specific and target links that only have a “_blank” attribute:

You can even target made up attributes:

Maybe you want to target links that lead to a page on the same website. You can do that by doing a “starts with” attribute selector. In this case anything that starts with a relative page or is our website url:

There is a lot more you can do with this. I encourage you to read up on it at W3 Schools.

3. :after & :before content Attr

The :before and :after offer some hidden features that not everyone is aware of. Typically when you use these you type in some text for the “content” and it will show up before or after the element:

There is a neat trick to being able to change the content based on other factors on the page. It turns out the content property can take an attribute selector as the text to be displayed:

This will add the text “Foo” before the “Bar” content on the page. Changing the data-content attribute via javascript will change the CSS as well. One real life application for this is for making simple tables a little more responsive on smaller screen sizes by removing the <th> elements and using the :before content attr property to display the header in an easier to read way:

This basic table will have the columns on 1 row and the values on another. That is fine and dandy for regular screens, but when you get down to the smallest screens ( with a lost more data than what we’ve entered ) you will run in to issues where everything is squished. With the new data attributes we added, though, you can fix that:

This will put the content of the “data-small” attribute to the left of the cell value.

Be on the lookout for part 3!

Lead Developer

Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.