Day 22:
Yesterday I spoke about selecting ARIA attributes with CSS to style it appropriately. Since I discussed that specific scenario yesterday, I thought I'd discuss the more general case today! A CSS style is made up of the selector and then the styles. Here's a selector selecting the h1 tag and making it red:
h1{color:red;}
Now, the superpower of CSS which I showcased yesterday is the ability to select by attributes too! A checkbox has a selected attribute that changes based on whether it's selected or not, we can use that attribute to only style if it's checked like so:
input[type=checkbox]+label{color:red;}
This will color the label of any input with a type of "checkbox", but not the labels of other types of input.
I hope that showcased a bit of the power of CSS selectors. Until next time!