CSS Class & Child Selectors
Understanding Complex CSS Class Selectors
Understanding how a CSS Class Selector effects an element can sometimes be tricky. Especially, when you start to deal with Child Selectors.
Reading a CSS declaration right-to-left (r-t-l) helps decipher what is happening a little better than reading left-to-right (l-t-r). You can use the same method to write what can be a sometimes tricky CSS style.
Here are some examples of what I mean. They all produce the same result, but in a different way.
Reading l-t-r & r-t-l
a.link {color: #c00;}
- All links having the ‘link’ class will be red.
- “Color is #c00 (red) when the class ‘link’ is attached to ‘a’ tags”.
<a href="index.php" class="link">my blog</a>
my blog
.link a {color: #c00;}
- All links inside an element having the ‘link’ class will be red.
- “Color is red for ‘a’ tags that follow the class ‘link’.”
<div class="link"><a href="index.php">my blog</a></div>
a.link:hover {color: #000;}
- All links having the ‘link’ class will be black when moused over.
- “Color is black on mouseover (hover) when the class ‘link’ is attached to ‘a’ tags.”
<a href="index.php" class="link">my blog</a>
my blog
.link a:hover {color: #000;}
- All links inside an element having the ‘link’ class will be black when moused over.
- “Color is black on mouseover for ‘a’ tags that follow the class ‘link’ (within an element as stated)”.
<div class="link"><a href="index.php">my blog</a></div>
ul.link li a {color: #c00;}
- All links inside an li inside a ul having the ‘link’ class will be red.
- “Color is red for ‘a’ tags that follow a line-item (<li>) tag when an unordered-list (<ul>) tag is attached to the class ‘link’.”
<ul class="link"><li><a href="index.php">my blog</a></li></ul>
Long CSS declarations can be tricky. But they are powerful to use and maddening when you spend hours trying to figure out why some things are behaving like they do.
Hopefully, the reading right-to-left approach may be of some help.