# Data and attributes as selectors

You may have seen some html/css written as such...

<a href="https://google.com">Google</a>

a[href^='https'] {
  font-size: 1rem;
  color: orange;
}

Google

Do you know what the selector is saying? It says... find any a tag that has a href attribute that starts with ^= the value https. Neat!

Its a lesser-known piece of functionality that attributes and their values can be used as selectors in CSS but perhaps thats because its performance is not that great. I wouldn't recommend using attribute selectors all over your code but here's a more practical example of using them, detecting broken links.

# Broken link detection

Imagine that you are dynamically binding the href attribute but are getting nulls, resulting in empty values. How would you know? Create an attribute selector that looks for exactly that. 😄

a[href=''] {
  border: 1px solid red;
}

By just adding this line of CSS you know will have a visual indication of a red box around broken anchor tags on your page.

Google

# Also...

You'll be happy to know the other variants of 'ends with' $= and 'contains' *= exist too. A more complete list of attribute selector variations can be found here. Try them out and see what other uses you can come up with.

Fun fact: If you're a Vue.js user you'll notice that attribute selectors are applied to components that use a 'scoped' block of CSS as a way of identifying markup that should have styles applied.

~ zan0