The CSS syntax is simple, and in order to understand it is not necessary to have a doctorate degree in the field of IT. However, this is one of the few popular languages, which is not logical. Unlike other web programming languages such as JavaScript and PHP, the problems are not solved by the usual logic in the CSS. Algorithms such as “if X, then do Y, otherwise do Z” or “select all Y, then make with them X” cannot be implemented in a language like the CSS. This language created for the mounting, a language for designers, rather than developers. Some of the most experienced programmers spent a lot of effort in order to learn the CSS.

Learning of CSS begins with the classes and ID, as well as the use of. and # for the direct indication of elements. This is enough to build the fully functional website, but it is not enough flexible solution in the case of a complete change of design. Let us take a look on an alternative approach to control such elements that hard to reach.

Adjacent sibling combinator

Let us start with the selector, which is handy in the difficult situations. The adjacent sibling combinator is indicated by a combination of two elements with a symbol +:

h1 + p

It separates out the following p-element that is located right after the h1-element in the DOM. Typographical theory assumes that we should use indents in the paragraphs of text, but only if they follow another paragraph. In practice, this can be used to make indents in all paragraphs except the first:

p + p {
text-indent: 1em;
}

It's much more convenient than separate out the first paragraph with class = “first”. There will be no classes, but three lines and a full support for the browsers. If we range the tags of img that are related to the filling of a website within the tags p (as we should do), we just can push back their left fields using a negative value - 1em:

p + p img {
margin-left:-1em;
}

It is pretty easy, right. But what if we want to separate out the first line of all paragraphs that stand right after the headers without changing any other paragraphs. Again, we can use the class of presentation. A simple selector that is made from the adjacent built-up combinator and the pseudo-element will cope with the task:

h1 + p:: first-line {
font-variant: small-caps;
}

Note: a pseudo-element : first-line adopted in the CSS 2.1 and in the CSS3 is used an entry :: in order to distinguish between the pseudo-classes and pseudo-elements.

Child combinator

The usual protocol of markup is the placing of sections in the element of # page or # wrap:

<div id="page">
<header></header>
<article>
<section id="main"></section>
<aside></aside>
</article>
<footer></footer>
</div>
Regardless of whether we use the HTML 5 Syntax or XHTML 1.1, this basic format should look familiar to us. If your document has a fixed width of 960px, centered, and each element is placed horizontally, the CSS probably looks like:

# Page {
width: 960px;
margin: 0 auto;
}
header,
article,
footer {width: 100%;}
Probably, we are more accurate in the work and in order to avoid unwanted changes in the top-level elements, use:

# Page header,
# Page article,
# Page footer {width: 100%;}
There is a better way. We're all familiar with the universal selector *. When we combine its use with the child selector, we can choose all the elements that are the direct descendants of # page without any influence on the “grandchild” elements:

# Page> * {width: 100%;}
In the future, it will help add or remove top-level elements in the document. Returning to our initial layout, it will affect the elements of the header, article and footer, but it does not affect # main and everything else inside the element of article.

Attribute selectors of the string and substring

Attribute selectors are the most effective. They also exist in the CSS 2.1 and usually is used in the form of input [type = “text”] or [href = "# top"]. But the CSS3 offers a deeper level of control in the form of strings and substrings.

Note: so far all that we have discussed was referred to the standard CSS 2.1, but now we are entering the territory of CSS3.

There are four main attributes of the selector string, where “v” = value, “a” = Attribute.
V is one from the list of values that are separated by a space: element [a ~ = “v”]
and it begins with v: element [a ^ = “v”]
it ends with v: element [a $ = “v”]
it contains a value: element [a *= “v”]

Selectors’ potential of string attribute is actually infinite, as an excellent example are the icons. Let us say we have an unordered list of links to profiles in the social networks:


<ul id=”social”>

<a rel="nofollow" href=”http://facebook.com/designfestival”>Like on Facebook</a>

<a rel="nofollow" href=”http://twitter.com/designfestival”>Follow on Twitter</a>

<a rel="nofollow" href=”http://feeds.feedburner.com/designfestival”>RSS</a>

</ul>

It is easy bringing them into order as making a request through their href attribute to locate the keyword. We can arrange them as follows:

# social li a:: before {
content:”;
background: left 50% no-repeat;
width: 16px;
height: 16px;
}
# social li a [href *= “facebook”]:: before {
background-image: url (images / icon-facebook.png);
}
# social li a [href *= “twitter”]:: before {
background-image: url (images / icon-twitter.png);
}
# social li a [href *= “feedburner”]:: before {
background-image: url (images / icon-feedburner.png);
}

Similarly, we can select all the links in the PDF documents using a selector attribute of Suffix:

a [href $ = “. pdf”]:: before {
background-image: url (images / icon-pdf.png);
}

The browsers that do not support the attributes of substrings in the CSS3 will not show the icons, but it is not so important - they are just beautiful addition without the special functionality.

Structural pseudo-classes

Finally, it is beneficial to use the pseudo-classes (do not confuse them with the pseudo-elements and pseudo-classes of link and state). We can use them to separate out the elements in terms of their position in the DOM. The good example of the use of structural pseudo-classes is the separation of the first (or the last) element in the element tree, or a choice between even and odd elements.

• List Item 1
• List Item 2
• List Item 3
• List Item 4
• List Item 5
• List Item 6

ul li { border-top: 1px solid #DDD; }
ul li:last-child { border-bottom: 1px solid #DDD; }
ul li:nth-child(even) { background: #EEE; }

Note: the pseudo-element - :first-child is only available in the CSS 2.1. All other pseudo-elements including :last-child related to the standard of the CSS3.

However, we need to know when NOT to use the structural pseudo - elements. They should be used only to separate out the element by its position, but not by its content. If we want to perform any operation with the element, regardless of its location in the DOM, we should use multi-valued semantic selectors, for example, a class, ID or string.

Perhaps, we are already using some of the above combinators and selectors, some of us could use them correctly, and some maybe not correctly, but the additional reminder will not hurt in what cases the class or ID are more convenient. Even the best of us often are mistaken in such things.