Basic CSS

1. Styles (classes and selectors) can be declared so they're relative to their physically enclosing block

#container .relativeClass
{
color: red;
}

<div id="container">
<span class="relativeClass">My red paragraph</span>
</div>

If relativeClass is assigned to an element that doesn't have the 'container' id, the style will have no effect.

The .reativeClass name can be safely reused/redefined within different scopes.

Elements can be specified to have a specific style within the scope of an enclosing block as well:

#divContainer p
{
color: red;
}

.classContainer p
{
color: red;
}

2. Styles (classes and selectors) can also be declared so they're relative to another class or selector

.containerClass .nestedClass
{
color: red;
}

#containerId #nestedId
{
color: green;
}

3. Classes and selectors can be constrained to apply only to a specific element

p.elementLimitClass
{
color: red;
}

p#elementLimitId
{
color: green;
}

<p class="elementLimitClass">My elemented limited class paragraph</p>

<p id="elementLimitId">My elemented limited id paragraph</p>