In Uncategorized on November 13, 2014 at 11:31 pm
This is a test of the CSS Level 4
:matches pseudoclass, which seems to be implemented in current browsers as
-blink-any. It works in my current versions of Firefox, Chrome and Safari. The equivalent code for Opera and IE doesn’t seem to work at the moment, but if you know of a way to get them to work please leave a comment here.
If it is working in your browser the link text will appear green (whether visited or unvisited) and have a yellow background when it is hovered over, receives focus or is in the process of being clicked on.
See the Pen :matches pseudoclass by WebDevCA (@WebDevCA) on CodePen.
In Uncategorized on November 4, 2013 at 11:54 pm
There’s a CSS3 pseudo-class out there called
:only-child that I didn’t think I would ever need to use. The Mozilla Developer Network says it, “represents any element which is the only child of its parent. This is the same as
:nth-child(1):nth-last-child(1), but with a lower specificity.”
When working recently on an overhaul of Kingston.com, however, I did find a need to use this pseudo-class. In the Company pages there are various tables of information. When the table uses just one row in the
THEAD that row gets a powder blue background color. But when there are two rows in the
THEAD the first row gets a lighter shade of background color while the second row gets the same color that a row will get if it’s the only child in a
THEAD. The only way to get the only header row in one instance and the second header row in another instance to match, without resorting to class names or deprecated HTML, was to use the
:only-child pseudo-class, like so:
- THEAD TR:nth-child(even),
- THEAD TR:only-child
- background-color: #CCE5FF;
And here’s the CodePen I created to showcase the effect:
In Uncategorized on November 4, 2013 at 10:49 pm