EchoEcho.Com Homepage
Web Hosting - As Reliable As It Gets!
   Home > Tutorials > CSS > Selectors


 Tutorials 
 D-Zine Articles 
 Online Tools 
 Free Resources 
 References 
 Quiz 
 Hosting 

















  CSS SELECTORS :
CONTEXT DEPENDANT SELECTORS








It is possible to make selectors that will only work in certain contexts.

For example, you can define a style for the <B> tag that is only triggered if the text is not only bold but also written in italics.

For example, the style should be in effect here:

<i><b>example</b></i>


but not here :

<b>example</b>.





THE SYNTAX
Simply adding a normal style to the <B> tag is done like this:

B {font-size:16px}


Adding a context dependent style, like the one described above is done like this:

I B {font-size:16px;}


We simply separated the contextual <I> tag from the <B> tag with a space.




USING GROUPED AND CONTEXT DEPENDENT SELECTORS AT THE SAME TIME:

It is possible to use context dependent and grouped selectors at the same time.

For example, like this:

I B, .headlines, B .sublines {font-size:16px;}


In the example the font-size of 16 pixels is in effect on:
1) All <B> tags enclosed by <I> tags
2) All headlines classes.
3) sublines classes enclosed by <B> tags.



 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!
FACT:
Few of the web's most visited sites use more than 15 different tags.
TIP:
An HTML editor may help you create pages faster.
But it also means that your pages load slower and that your design options are limited.

It doesn't take a hardcore nerd to learn 15 tags in HTML!





     "Better Than Books - As Easy As It Gets!"


On EchoEcho: D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | HostingAbout EchoEcho