Jeff Bridgforth :: Webcraftsman

Power of the Plus :: Adjacent Sibling Combinators and other CSS selectors

November 11, 2011

CSS · Drupal

For most of my Web prac­tice, I wrote my own HTML and could add classes and IDs to ele­ments as hooks to tar­get ele­ments in my CSS. So when I first heard about CSS com­bi­na­tors, I did not see much use for them. I won­dered why I would need them. Why would I need some­thing gen­eral when I could spec­ify an ele­ment by class or ID.

Fast for­ward to this year. After sev­eral career changes, I am now work­ing with CMS frame­works that do not give me the con­trol over the code that I had in the past. At times, it can be a chal­lenge to find hooks to tar­get spe­cific ele­ment with CSS.

Last Spring, I was rein­tro­duced to CSS com­bi­na­tors. These pow­er­ful lit­tle state­ments are now part of my daily workflow.

Side­note: I read this arti­cle around the time that I started using com­bi­na­tors. I found it to be a great resource because it had a handy ref­er­ence to browser support.

Con­di­tional CSS?

One of the pow­er­ful ways that I have started using com­bi­na­tors is to cre­ate “con­di­tional CSS.” I had a project where the busi­ness unit wanted to add head­ings to their body con­tent for recipes. They wanted to add “Ingre­di­ents” and “Instruc­tion” head­ings to make the con­tent more clear. At that time, all the ingre­di­ents in the ingre­di­ent list­ing were bold. Now that they were adding the head­ings, they wanted those list items to be nor­mal weight.

The chal­lenge. The head­ings were going to be added to new arti­cles and then slowly added to exist­ing arti­cles on the site. Could I come up with a solu­tion that would only be imple­mented on arti­cles with the new headings?

Thus the need for “con­di­tional CSS.” I found my solu­tions by using the adja­cent sib­ling com­bi­na­tor (E +F) and the child com­bi­na­tor (E > F) to tar­get the ele­ments the ingre­di­ents list­ings and change the font weight to normal.

.recipe-page .body h4 + p > b {
font-weight: normal;
}
.recipe-page .body h4 + div b {
font-weight: normal;
}
.recipe-page .body h4 ~ span {
font-weight: normal !important;
}

I had to come up with sev­eral dec­la­ra­tions because dif­fer­ent edi­tors had entered in the con­tent differently.

Another Exam­ple

On another project where I needed some con­di­tional CSS was show­ing the com­ment count for an article.

The chal­lenge was to write CSS to cover sev­eral dif­fer­ent con­di­tions. Some com­ments would just show a com­ment count. Other list­ing would include a rat­ing or there might be rat­ings with­out a com­ment count.

The busi­ness unit also wanted to have a link to the com­ment area for arti­cles that did not you have a com­ment or review. The devel­oper needed to have that link always be always present in the code so I had to come up with a solu­tion to hide the link when there was a com­ment count  and/or rat­ing was present. When there was not a com­ment, there would not be any code for the com­ment count. So show­ing the link when there was not a com­ment was easy.

Here is my solu­tion to hid­ing the com­ment link:

The Com­ment Block on the page

The HTML

The CSS

So I am want­ing to hide the div with a class of “rating-buttons” because users have already com­mented on this article.

.recipe-rating-comments-count .rating + .rating-buttons >
.write-comment, .recipe-rating-comments-count .comment-counts-text + .rating + .rating-buttons >.rate-review,
.recipe-rating-comments-count .comment-counts-text + .rating-buttons > .rate-review,
.recipe-rating-comments-count .comment-counts-text + .rating-buttons > .write-comment {
display: none;
}

Using a com­bi­na­tion of adja­cent selec­tor and child com­bi­na­tor, I can tar­get the dif­fer­ent con­di­tions in which I want to hide the “Write a Com­ment” link.

I also used a cou­ple of com­bi­na­tions of adja­cent sib­ling com­bi­na­tor and child com­bi­na­tor to add dif­fer­ent mar­gin depend­ing on what ele­ments were present. For exam­ple, I wanted the rat­ings to have more mar­gin at the top when a com­ment count was not present.

In Clos­ing

I spend the major­ity of my time work­ing in Dru­pal. Both of my exam­ples are not from a Dru­pal envi­ron­ment but I could share more. One of the ones I use most often is Panel Sep­a­ra­tors. I can use the adja­cent sib­ling com­bi­na­tor to use tar­get the class of the pane that pre­cedes the panel-separator to tar­get it for styling.

Just like a lot of things in life, once you are aware of some­thing, you begin to see it every­where. Or is this case, I keep see­ing prob­lems that these com­bi­na­tors pro­vide a great solu­tion for.

Spe­cial thanks to Chris Coyier, who encour­aged me to blog about this when I shared the idea with him at Front End Design Con­fer­ence.