Understanding CSS Selectors

Introduction

A selector is a pattern that selects an element to apply the CSS style rules. Selectors can be used as a condition or a CSS rule to determine the elements that match with the selectors.

The CSS rule is divided into the following two parts:

Selectors
Declarations

The declaration is a part that appears within the braces of the CSS rule followed by the selectors. The rules defined in the declaration part are applied to the elements specified by the selectors.

The various types of selectors are given below:

The universal selectors
The type Selectors
The Class selectors
The id Selector
The child selectors
The descendant selectors
The adjacent sibling selectors
The attribute selectors
The query selectors

Now let's learn some theory about the preceding selectors.

The Universal Selectors

The universal selectors select all the elements that are present in an HTML document. We can use the selectors to apply the same rule to all the elements of an HTML or XHTML Document. The universal selectors are represented by an asterisk symbol, as shown in the following code snippet :

*{ }

The following code snippet shows the use of the universal selectors.

Example

*{
margin: 0;
padding: 0;
}

In the preceding code snippet, the margin and padding properties are set to 0 for all the elements in the HTML or XHTML document on which the CSS rule is applied.

The Type Selector

The type selector matches all the elements specified in a list with the given value to determine the elements to which the CSS rules are to be applied. The rules applied to several elements of an HTML or XHTML document are similar to the ones applied to a CSS file. The following code snippet shows how to use the type selector:

h1, h2, h3, p {font-family:sans-serif}

In the code above, we have specified the font-family property for the various heading element ( h1, h2, and h3) and for the paragraph (p).

Class and ID Selectors

A class selector is a name preceded by a full stop (".") and an ID selector is a name preceded by a hash character ("#").

So the CSS might look something like:

#top {
background-color: #ccc;
padding: 20px
}
.intro {
color: red;
font-weight: bold;
}

The HTML refers to the CSS using the attributes id and class. It could look something like this:

<div id="top">
<h1>C# Corner </h1>
<p class="intro"> Spread of Knowledge </p>
<p class="intro">HTML5, CSS,3, JavaScript…….</p>
</div>

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { /* whatever */ } will only be applied to paragraph elements that has the class "jam". (Via ~HTML Dog)

The Child Selectors

A greater-than symbol (">") can be used to specify something that is a child of something else, that is, something immediately nested within something.

TD>b{ font-family:sans-serif}

A combinator is a symbol, such as >, < and + that shows the relationship between two elements. In the code above the B element is the immediate child of the TD element. The CSS rule is applied to all the B elements that are immediate children of TD elements.

The Adjacent Selectors

A plus sign ("+") is used to target an adjacent sibling of an element, essentially, something immediately following something.

HTML

<h1>Clouded leopards</h1>

<p>Clouded leopards are cats that belong to the genus Neofelis.</p>

<p>There are two extant species: Neofelis nebulosa and Neofelis diardi.</p>

...and CSS...

h1 + p { font-weight: bold }

Only the first paragraph following the heading will be made bold

The Descendant Selectors

The descendant selector matches all elements that are descendants of a specified element. The first simple selector within this selector represents the ancestor element, a structurally superior element, such as a parent element, or the parent of a parent element, and so on.

See the the following code:

Table b { font-family: sans –serif}

In this code snippet, CSS is applied to all the b elements that are nested within the code element.

The Attribute Selectors

Attribute selectors allow you to style an element's box based on the presence of an HTML attribute or of an attribute's value.

The following is an example with an attribute that appends the attribute name enclosed in square brackets, to style something that simply contains a certain attribute

abbr[title] { border-bottom: 1px dotted #ccc }

This basically says "shove a dotted line underneath all abbreviations with a title attribute".

With the attribute and its value, you can further specify that you want to style something with a specific attribute value.

input[type=text] { width: 200px; }

This example will apply a width of 200 pixels only to input elements that are specified as being text boxes.

(<input type="text">).

You can also target more than one attribute at a time in a way similar to the following:

input[type=text][disabled] { border: 1px solid #ccc }

This will only apply a gray border to text inputs that are disabled.

The query Selectors

The queryselector() and queryselectorAll() methods accepts CSS selectors as parameters and return the matching element node in the document tree. The queryselectors() method helps in querying the entire document or a specific element of the document. You can use all the CSS selectors with this method as parameters. If multiple events are available, CSS selectors return the first matching element; or return null, if no element is available. The queryselectorsAll() method returns all the available elements as a single static collection of elements known as StaticNodeList. This collection of elements is not affected by any change made in the document tree, for instance removing or inserting a node does not affect staticNodeList.

So this was a little bit of theory about CSS selectors, read and enjoy. Do some more exercises from Google and Notepad. In the next article we'll start working with CSS.