Buy Windows 7 Smarter CSS using an adjacent select

Smarter CSS making use of an adjacent selector
Posted in CSS on 1 October 2008

Wouldn’t it be great if you could add styles to your web page by specifying a style for a particular element on the basis of its proximity to another element? Well, in fact,Office 2007 Key, you can do this utilizing the adjacent-sibling selector,Buy Windows 7!

In this case,Office Home And Business 2010 Key, proximity means the position in the document tree. The adjacent sibling selector targets an element immediately following another element and that share the same parent. The adjacent sibling selector enables you to selectively target an element without adding a class to that element. Less code in the page. Better style management

For example, you might want to give paragraphs that follow a heading h1 a different style to increase readability; in this case bold. Demo

h1 + p font-weight: bold;
Or you might want to style the first list item in an unordered list differently to subsequent list items. In this case, we use the adjacent sibling selector to apply our style rule to the second and subsequent list items but the first li is unaffected because it is not immediately following another list item. Demo

li + li color: #F60;
You can add a class attribute to your first element if you want to make this more specific. You might use this to style an image description. Demo

img.attractiveimage + p color: #69C; font-style: italic; margin-left: 50px;
The adjacent sibling selector is perhaps not as widely used as it might be but I’m intending to use it more and more.

Note: The adjacent sibling selector is pretty well supported [see Quirksmode and Sitepoint] by most modern browsers. However, in Internet Explorer 7,Office 2007 License, this selector will also select inappropriate elements in your source code, such as HTML comments. Just make sure that these don’t get in the way. IE 6 does not support the adjacent sibling selector but we’ll soon be dropping support for that browser,Microsoft Office 2010 Key, right?!

Technorati : css
Related Posts CSS Tip: Utilizing max-width for flexible images Web design books for Christmas reading CSS tables revisited Useful tip for creating double borders with CSS3 CSS3 gradients are the next big thing Making circles with CSS3 border-radius