What is sibling selector in css?
The Adjacent-Sibling Selector Web Review Show As previous articles in this series have shown, CSS has some interesting new selectors. Between the universal selector and the child selector, it's possible to construct selectors which would be next to impossible using traditional CSS1-style selectors. Well, we're continuing the trend in this installment. This time, though, we'll be talking about something which is almost literally impossible to do with contextual selectors. With the adjacent-sibling selector, you can apply styles to elements based on the elements which immediately precede them in the document. How It WorksThe syntax is straightforward enough: just two or more selectors separated by a plus (
The rule will apply to all paragraphs which immediately follow an Let's look at this in a little more detail. Examine the tree view in Figure 1 for a moment.
One example of adjacent siblings is the So let's say that we want
Referring back to Figure 1, we can see that the
The text between the elements does not affect the operation of the selector. This is true even with block-level elements. Consider:
We can make the paragraph gray with the following rule:
Remember that the adjacent selector only cares about elements, and where they fit into the document structure. That's why the text is effectively ignored. (Technically, it's part of the Combining With Other SelectorsOf course, the previous example will actually select any paragraph which follows an
Suppose we want to narrow it down further: we only want this grayness to happen when the
Now, let's make things a little more general. Suppose we want any element which follows an
We can turn this around, too. We might want to apply styles to any element which is the descendant of a
If you're still a little unsure of how these work, try taking a moderately complex document of your own and trying to construct selectors which will exactly address a given element using all the various CSS2 selectors we've used here. A little practice will go a long way toward getting comfortable with these selectors. (For a guide to which browsers will help you in this practice, see the "Browser Support" section near the end of the article.) Interesting UsesOkay, it's all well and good that we can do this sort of thing, but what's the big deal? There are hundreds of answers, but here are a few which occurred to me as I wrote the article. A common print effect is to have the first paragraph of an article be italicized, or boldfaced, or larger�at any rate, different in some way from the rest of the article. Assuming that the article's title is an
This further assumes that no other
Here's another possibility. You can change the style of every item in a list except the first one. For example, let's say you want the first item in a list to be normally styled, and the following ones to be gray and slightly smaller. Here's the rule:
The first How about closing up the distance between headings and the following elements? Authors are always trying to do this with classes and other tricks, but with the adjacent-sibling selector it becomes very easy. Try this out in a CSS2-aware browser:
Ta-da! The usual amount of
margin space between headings and whatever follows them is closed up to a mere eighth of an em. You can vary that amount as you like, of course. This can be adapted in any number of ways�you could pull lists up closer to paragraphs by using Browser SupportAdjacent-sibling selectors are supported in Internet Explorer 5.x Macintosh. They are also supported in the Netscape 6 preview release 1 for all the myriad platforms for which it's available, and in preview release 3 of Opera 4 for Windows. There are bugs in the handling of adjacent-sibling selectors in IE5 for Windows, and Opera 3 for Windows. Still More to ComeIn many ways, the adjacent-sibling selector is the coolest of the new CSS2 selectors. Thanks to its addition to CSS, it's very easy to select for certain circumstances which many authors want to address, like closing up the space after headings, but until now have been forced to use classes or other tricks to handle. When combined with things like the universal selector, a vast array of possibilities open up. In the next article, we'll take a look at two new pseudo-classes. One of them can be useful in multiple-language documents, and the other can be very useful in any document at all. What is a sibling selector?General Sibling selector: The general sibling selector is used to select the element that follows the first selector element and also share the same parent as the first selector element. This can be used to select a group of elements that share the same parent element. HTML.
What is a sibling element in CSS?The general sibling combinator ( ~ ) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.
How do I target my first sibling in CSS?The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
What are the 3 selectors in CSS?Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state)
|