An earlier post detailed how we can build a 100% CSS-based tab layout. While pretty cool and somewhat usable it had some flaws.
- Jumps back to the first tab when the mouse pointer leaves the area.
- Depends on exact positioning of the content in relation to the tabs.
- Not touch friendly.
- Not keyboard friendly.
Most css coders are familiar with the basic descendant selector,
parent child and use it all the time, perhaps too much.
The descendant selector is applied to every single child of parent and that is not
The direct child selectors
A better solution in some cases is the direct child selector:
parent > child. The difference between this and the descendant
selector mentioned above is best explained with a nested list