Adjacent Selectors

Tags don't need to be nested within one another for us to be able to specify that a special style is to apply. We can also specify styles that are to apply when one tag directly follows another without any intervening tags.

To do this we separate them with a plus sign like this:

b+i {color:red;}

Now this style will apply to italic text provided that there was preceding bold text and no other tags occurred between the bold and italic text. There can of course be lots of other text between the bold and italic text for this style to still apply to the italic text just as long as there aren't any HTML tags.

The adjacent selector stylesheet definition is supported by all modern browsers. The only currently used browsers that don't support this selector are old versions of Internet Explorer. The IE versions that don't support it are now so old that even Microsoft has stopped supporting them and is trying to get those people still using those versions to upgrade to more modern versions that are still supported.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate