You probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are: nth-child(), nth-last-child(), nth-of-type(), and nth-last-of-type().
The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression.
For a recent project, I had to research the concept of CSS tooltips and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.
So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.
Three of the attribute selectors in the CSS3 spec allow you to check the value the specified attribute for a string match. These attribute selectors are referred to as substring matching attribute selectors.
These can open endless possibilities, so I think it’s useful to have them in mind. And as a bonus, these selectors have strong support as far back as IE7, so pending thorough tests I think they are quite safe to use in many current projects.
Here’s a brief outline of each one, with some examples.
Due to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS.
As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs.
Because the web is built on links, how we style our links (i.e, anchors, or <a> tags) should always be an important part of a site’s overall design, branding, and feel.
I’ve seen so many variations on the link style/color and hover style/color combination, that I thought it would be interesting to list as many of them here as possible. Some of these will be quite common and humdrum, while others may be ugly and impractical. I tried to stay away from really bizarre animated stuff, but instead chose to stick to those that you might actually see on a web page.
“Vertical-align isn’t working!” cried the web developer.
The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times.
In this post, I’ll try to cover it in an understandable manner.
One of the wishlist items a few people mentioned was “CSS blend modes” with a use case of tinting an image on hover (or tinting it statically, then removing the tint on hover or by some other interaction). My immediate thought was: That should be simple enough, shouldn’t it?