CSS

There are three levels in structuring CSS selectors:

1. Default
2. Generic
3. Specific

Case in point: The designer needs to set the style on all HTML Anchor elements as denoted by the <a> tag.

Default

This is a blanket approach wherein all anchor elements, regardless of where they are–in the header, main, or footer–will be styled.

a
{
    text-decoration: none;
}

Generic

In case there is a different style for all anchor elements within the Post component .post:

.post a
{
    border-bottom: 1px solid black;
}

Specific

Styling specific elements is as straightforward as can be. One thing to watch out for, though, is having unintentional styles due to overlapping that came from Default and Generic styles.

.next
{
    color: blue;
}

To resolve this, the designer can do either of the following to prevent or reverse the unintended effect:

• :not
• Reversion

:not

:not is a CSS Pseudo-class that excludes the selector specified. One thing to note, though, is that it only accepts a single selector (no multiple selectors nor combinators allowed). This means that the designer must be able to select the element specifically.

.post a:not(.next)
{
    border-bottom: 1px solid black;
}

Reversion

Reversion is the method of “overwriting” the previous declaration that has unintended effect. It is repetitive but a necessary recourse.

.post .next
{
    border-bottom: 0;
}

—

The case in this example deals with elements that are not classified (or without class attributes–not to mention specific class names). This type of structuring won’t be as necessary first, if there are no overlapping of styles and of course, if the designer could specifically select elements.