Learn CSS, Selectors, Part 3 - Direct Adjacent Sibling Selector
(Page 4 of 4 )
In markup languages, a given element is said to be a sibling of another element if they have the same parent element. For example, if we have three <P> elements in the <Body> element (and the <Body> element is the direct parent), then the three <P> elements are said to be siblings. CSS 2 introduced the adjacent sibling selector, but because the CSS 3 Specifications introduced the indirect adjacent sibling selector, the names have been changed to direct adjacent sibling selector and indirect adjacent sibling selector. The direct adjacent sibling selector applies the styling rules if the element on the right side of the selector is a sibling of the element on the left side of the selector. In other words, it applies the rules if they share the same direct parent. It's explained better with an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="Selectors.css" type="text/css">
<title>CSS Selectors</title>
</head>
<body>
<p>Actually inside the W3C there are working groups which are responsible about designing the technology, the working group of a given technology (like the CSS Working Group) produces documents called CSS Specifications and these Specifications specify how the CSS Language should function, note that the working group doesn't produce any software.</p>
<p>In other words, the CSS Working Group doesn't implement the specifications but it just produce a standard specifications so when Microsoft implements its Internet Explorer it decides which parts of the specifications it will implement (maybe it will implement the whole Specifications) and which parts it may add to the its implementation. This is a very important issue and we will talk about it shortly but for now you can say that the best browser which supports CSS is Mozilla Browsers.</p>
<p>When the Specifications are complete (which means that the Specifications have been reviewed) it becomes Recommendation and this is a perfect expression, Recommendations, because as we have said that the W3C Consortium has no control over the various implementations of the Specifications it produces. There is another expression called Candidate Recommendation which the W3C call on the Specifications that being tested and reviewed and just before it becomes an Recommendation.</p>
</body>
</html>
And here's the CSS code:
p + p
{
background-color: YellowGreen;
color: white;
font-size: .7em;
font-family: Tahoma, Arial;
}
In the above HTML code we have three <P> elements that share the same parent (the <Body> element), so these elements are siblings. The CSS code simply uses the direct adjacent sibling selector; the + sign is used to define the direct adjacent sibling selector. It can be read that when the second element (the <p> element on the right side of the + sign in the CSS selector) is a sibling to the first element (the <p> element on the left side of the + sign in the CSS selector), apply the styling rules on the second element. I know it might be confusing, but I chose this example to show you the effect of using this type of selector.
So let's think about it, now we have three <p> elements that are siblings to each other, and the selector says that it will apply the styling rules -- specifically, that it will apply the styling rules on the element of the right side of the + sign -- if the element on the right of the + sign is a sibling to the element of the left side. So when the browser's CSS engine parses the first <p> element, it will not apply the styling rules, because the selector will search for any sibling of the first <p> element and it will not find a sibling.
You may say that there are two <p> siblings of the first one, but with the direct adjacent sibling selector, the order of elements is important for applying the rule. You may think that the CSS engine will see the sibling elements in the same way you put it, and it will not apply the style for it. For the second <p> element the case is different; now it has a sibling (the previous <p> element in the markup) and it will apply the rule. The same thing will happen with the third <p> element because it has a sibling (the previous <p> element).
I think that the order of the elements in the markup and in the direct adjacent sibling selector is confusing, so I will give you another example. Suppose that we want to have a paragraph with a blue background and white text if it has a <Div> element as sibling. The code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="Selectors.css" type="text/css">
<title>CSS Selectors</title>
</head>
<body>
<div>This is a div element</div>
<p>Actually inside the W3C there are working groups which are responsible about designing the technology,the working group of a given technology (like the CSS Working Group) produces documents called CSS Specifications and these Specifications specify how the CSS Language should function, note that the working group doesn't produce any software.</p>
</body>
</html>
So we have the <Div> element followed by the <P> element, now write this CSS code:
div + p
{
background-color: blue;
color: white;
font-size: .7em;
font-family: Tahoma, Arial;
}
This code will apply those styles if the <p> element has a <Div> sibling (not the other way, as we will see). If you open the Web page you will get the expected result:
If you put the <P> element before the <Div> element, the styles will not be applied because, as I have said, the order of elements in both the markup and in the CSS selectors count. To see this in action just replace the <Body> element with the one below:
<body>
<p>Actually inside the W3C there are working groups which are responsible about designing the technology,the working group of a given technology (like the CSS Working Group) produces documents called CSS Specifications and these Specifications specify how the CSS Language should function, note that the working group doesn't produce any software.</p>
<div>This is a div element</div>
</body>
Reload the page and you will not find any styles.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 18 
