<style>
h2 {margin-top: 20px; margin-bottom: 20px;}
</style>
<h2>This header has 20px above and below</h2>
<h2>This header has 20px above and below</h2>
Because the bottom of header 1 has 20px and the top of header 2 has 20px, you'll see 40px between the 2 headers. Probably not what you wanted... To solve this, you need a rule that says "Put 20px on top and bottom of each H2, unless that H2 is below another H2. In that case, remove the top 20px and leave 20px below it." It sounds impossible, right? Style sheets can't be aware of what other content is on the page! I recently had that discussion with a visual designer on a project I was doing, and insisted the CSS couldn't support that request. A week later, I found adjacent siblings in CSS and agreed that it could indeed be done as he asked.
<style>
h2 {margin-top: 20px; margin-bottom: 20px;}
h2 + h2 {margin-top: 0 margin-bottom: 20px;
</style>
<h2>This header has 20px above and below</h2>
<h2>This header has 20px below</h2>
It's true that in a case as simple as this you might be able to get away with simply having space ABOVE all of your H2 tags if everything else is styled appropriately... but the real world is very rarely as neat and tidy as this. The adjacent sibling selector is most often used when you encounter an exception to the normal rules. Its much easier to add a "what if" rule than have to redesign all of your other elements to handle that one odd case in your content.
<div class="parentDiv">
<span> Don't want to style this one</span>
<img class="olderBrother">
<img class="middleBrother">
<div>Element with no class or ID</div>
<span>Style this one</span>
</div>
a[target='_blank'] {
padding-right: .9em;
background-image: url(images/extlink.png);
background-repeat: no-repeat;
background-position: right center;
background-size: 0.75em;
}
a[target='_blank']:hover {
background-image: url(images/extlink_light.png);
}
The above CSS will apply to any A tag where the target is equal to "_blank" (meaning a new window will open.) Notice that you can also create a selector for when you hover over an A with a target of "_blank" by adding the :hover just like you would a normal A:hover selector.
a[href^='https://'] {
color: #f00;
}
Another common feature you can apply to your links is appending an icon to let the user know if they'll be downloading a .PDF file, a .DOC file, etc. Also easy! By replacing the = with $= you tell CSS to apply styles to any link ENDING in the value specified. In this case, if the filename ends in ".pdf", add some space and a PDF icon.
a[href$='.pdf'] {
padding-right: .9em;
background-image: url(images/pdf-icon.png);
background-repeat: no-repeat;
background-position: right center;
background-size: 0.75em;
}
The examples given above might lead you to think the attribute selector only works on A tags... this is not the case. Any tag with attributes can be selected in this manner... for instance an IMG with the ALT text of "Login" would be
img[alt='Login']
Or if you wanted to style any IMG with the word "important" anywhere within the ALT text, you can use another variation of the attribute selector. Replace the = with *= and it will match if the value is contained at least once in the attribute. (Meaning that if your ALT text is "important and super important" it will still be matched by img[alt*='important'].
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (2)
Commented:
And I fixed the other comment for you.
Author
Commented:Since I'm using jQuery on my site, the removal part was easy with the .remove() function, so all I needed to do is figure out the best way to select multiple BR tags. I tried the adjacent sibling selector from my recent article, and it worked perfectly!
Open in new window