I was wondering recently how to get select elements with multiple selectors. Why would you want to select elements this way?
As a hypothetical example, imagine you read my post about highlighting author comments with Hybrid from a week or so ago. What if you wanted to be more precise with your selectors, so you could target that list element like so: list item comment with administrator entry-author ryan which highlights the list element with the comment, adminstrator and entry author classes on it.
Doing this is painfully obvious in retrospect. I can’t believe how this slipped by w3schools. So how, now, brown cow? Easy. Please enjoy my silly examples with follow.
div.comment {padding: 5px; margin: 5px;}
div.comment.admin {background-color: #ff00ff;}
div.comment.conscript {border: 2px solid #ff3312;}
div.comment.user {border: 1px solid #a3a3a3;}
And some basic html.
<div class="admin comment">Hi there, from the admin! - ryan</div> <div class="comment admin">Hello, from another admin! - chris</div> <div class="conscript comment">So, having fun? - loyal conscript, emily</div> <div class="user comment">of course I am! - user, joe</div>
Styling elements with multiple selector is easy. Just write the classes together, tag.class1.class2.
Happy styling.


