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

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:

a[target] { color:green; text-decoration:underline; }

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

a[target="_blank"] { color:red; font-weight:bold; }

You can even target made up attributes:

div[data-test] { background:gray; border:1px solid blue; }

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:

a[href^="/"], a[href^="https://www.powderkegwebdesign.com"] { font-size:24px; font-weight:bold }

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:

div.test:before { content:"Hello"; display:block; }

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:

<div class="test" data-content="Foo">Bar</div>

div.test:before { content:attr(data-content); display:block; }

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:

<table>
   <thead>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
   </thead>
   <tbody>
      <td data-small="Col 1">Val 1</td>
      <td data-small="Col 2">Val 2</td>
      <td data-small="Col 3">Val 3</td>
   </tbody>
</table>

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:

@media screen and (max-width:450px){
   table thead { display:none; }
   table td:before { content:attr(data-small); float:left: font-weight:bold; }
}

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

Be on the lookout for part 3!