Basic CSS Selectors

Here we are going to explain some basic existing selectors that can are considered to be most used today. But first of all, let’s see the definition provided by w3 schools:

In css, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.

So, let’s start.

The * Selector

* { *properties* }

The * selector just selects everything. This selector is quite useful if put in a specific context. However, its usage is quite limited today if compare with others.

HTML Tags

p { *properties* }

html tag that can appear within the body, can be addressed through CSS. Note that not all html tags accept all CSS properties. In the example above, all p tags within the document are given a range of properties.

Classes and IDs

#header { *properties* } .header { *properties* }

Thus, the selector starting with # refers to an html element with an id=”header” applied to it. The selector starting with . refers to an html element with a class=”header” applied to it. You can find classes and ids quite useful if need to style semantic elements across multiple pages.

Descendant Selectors

form p { *properties* }

You can target html elements based on their context selecting one or more elements above the targeted element. You can choose between simple selectors that are separated by a whitespace and have no limit to the amount of descending selectors as well as complex selectors that are interpreted from left to right.

According to a given example, all p tags within a form will be given a range of properties.

Combining All of the Above

.serviceNav li * { *properties* }

On the whole, there are no limits to the length or complexity of the selector.

In the example above, a selector matches everything within a li element, which appears in an element with class=”serviceNav” applied to it.

It is not so hard to write rules for a specific document, the other thing is to write CSS for entire site. It is advisable to verify that when a context is defined, it is necessary for an element to appear within that context to receive its defined style. If not, it’s better to leave the extra context selectors out.

Thus, in case you are going to style document, the selectors explained above can help you a lot. Of course, it will not result in the cleanest, leanest CSS possible, but it will be stable cross-browser.

Reference: www.onderhond.com/blog/work/css-selectors-pt1