Prev Next

Selectors

Selector Types

There are four types of CSS Selectors

[expand title=”1. The Element Selector”]

The element selector selects the elements based on the element name. For example, with the deceleration given below, all paragraphs i.e. <p> will appear in red colour text, background yellow and text aligned to the center.

p{
color: red; 
background-color:yellow;
text-align:center;
}

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<style>
p {
   color: red; 
   background-color:yellow;
   text-align:center; 
}
</style>
</head>
<body>
<p> This is para one </p>
<p> This is para two </p>

</body>
</html>
[/expand]
[expand title=”2. The ID Selector”]

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#myrule{
color: red;
background-color:yellow;
text-align:center;
}

From the above rule #myrule is a name defined by the user, it can be any name. the # defines the names as an ID
All elements to which this ID (#myrule) is applied will have the text colour in red and text aligned to the center
The ID is applied to an element as id=”idname”. e.g. <p id=”myrule”>.

Note: the # is not used in <p id=”myrule”>

Complete Example on ID selectors

<!DOCTYPE html>
<html>
<head>
<style>
#myrule{
   color: red; 
   background-color:yellow;
}
</style>
</head>
<body>
<p id="myrule"> This is para one which is formatted with the help of an ID </p>
<p> This is para two. No ID has been associated to this para, hence no formatting</p>
<p id="myrule"> This is para three whihc is also formatted with an ID </p>
</body>
</html>
[/expand]
[expand title=”3. The Class Selectors”] Class Selectors are just like ID selectors, the difference is that class is defined using as dot(.) and more than one class can be assigned to a given element

To understand the class selctors, lets take a look at the example below

Example on Class Selectors

<!DOCTYPE html>
<html>
<head>
<style>
.myclass{
   color: red; 
   background-color:yellow;
}
</style>
</head>
<body>
<p class="myclass"> This is para one which is formatted with the help of an class </p>
<p> This is para two. No class has been associated to this para, hence no formatting</p>
<p class="myclass"> This is para three which is also formatted with an class </p>
</body>
</html>

From the example above it is seen that the class is defined as .myclass and is applied to the paragraph elements with the attribute Class.

Note that while specifing class=”myclass” the dot is not used.

[/expand]
[expand title=”4. CSS Combinators”]

Combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

CSS combinators are of following types:

  1. Descendant selector,
  2. Child selector,
  3. Adjacent sibling selector,
  4. General sibling selector,
  5. Universal selector, and
  6. Attribute selector.

1. Descendant Selector

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element, you use descendant selector. It matches all elements that are descendants of a specified element. As given in the following example, the style rule will apply to <p> element – only when it lies inside the <div> tag.

div p {background-color: yellow; }
<!DOCTYPE html>
<html>
<head>
<style>
div p{
   background-color:yellow;
}
</style>
</head>
<body>
<p> This is para all by its self</p>
<div><p> This is para inside div tag </p></div>
</body>
</html>

2. Child Selector

The child selector selects all elements that are the immediate children of a specified element.

The following example selects all <p> elements that are immediate children of <body> element. Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.

body > p {color:#000000;}
<!DOCTYPE html>
<html>
<head>
<style>
   body > p {color:green;}
</style>
</head>
<body>
    <p> This is para all by its self</p>
    <div>
         <p> This is para inside div tag </p>
    </div>
</body>
</html>

3. Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

The following example selects all <p> elements that are placed immediately after <div> elements:

<!DOCTYPE html>
<html>
<head>
<style>
   div + p {background-color:yellow;}
</style>
</head>
<body>
    <h1>Example of Adjacent Siblig Selector</h1>
    <p>The adjacent sibling selector (+) selects all elements that are placed immediately after the specified element.</p>
	<div>
  		<p>Paragraph 1 in the div.</p>
  		<p>Paragraph 2 in the div.</p>
	</div>
	<p>Paragraph 3. Not in a div.</p>
	<p>Paragraph 4. Not in a div.</p>
</body>
</html>

4. General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements:

<!DOCTYPE html>
<html>
<head>
<style>
   div ~ p {background-color:yellow;}
</style>
</head>
<body>
    <h1>Example of General Sibling Selector</h1>
    <p>The general  sibling selector (~) selects all elements that are siblings of the specified element.</p>
	<p>Paragraph 1.</p>

    <div>
  		<p>Paragraph 2.</p>
	</div>

	<p>Paragraph 3.</p>
	<code>Some code.</code>
	<p>Paragraph 4.</p>

</body>
</html>

5. The Universal Selector

Rather than selecting elements of a specific type, the universal selector selects the name of any element type:

* { color : Blue;}

This rule renders the content of every element in our document in blue color.

<!DOCTYPE html>
<html>
<head>
<style>
  * {   color: blue; }
</style>
</head>
<body>
    <h1>Example of universal Selector</h1>
    <p>The universal Selector (*) selects all elements on the webpage.</p>
	<p>Paragraph 1.</p>

    <div>
  		<p>Paragraph 2.</p>
	</div>

	<p>Paragraph 3.</p>
	<code>Some code.</code>
	<p>Paragraph 4.</p>

</body>
</html>

6. The Attribute Selectors

You can also apply styles to HTML elements with particular attributes.

The style rule below will match all the input elements having a type attribute with a value of text:

p[color=”red”] {text-align: center; color: green;}

The advantage to this method is that, the same type of element with other value to the attribute is unaffected.

<!DOCTYPE html>
<html>
<head>
<style>
 
  p[align="right"] {text-align: center; color: green;}
</style>
</head>
<body>
    <h1>Example of Attribute Selector</h1>

	<p align="right">Paragraph 1.</p>
	<p>Paragraph 2.</p>
	<p>Paragraph 3.</p>
	<p>Paragraph 4.</p>

</body>
</html>
[/expand]

Multiple Style Rules

In the previous example we have already unknowingly touched on the subject of multiple style rules. Multiple style rules allows the user to combine multiple properties and corresponding values into a single block as defined in the following example:

h1 { color:#36C;
font-weight:normal;
letter-spacing:.4em;
margin-bottom:1em;
text-transform:lowercase;
}


Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them on separate lines.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example:

h1, h2, h3 {
color:#36C;
font-weight:normal;
letter-spacing:.4em;
margin-bottom:1em;
text-transform:lowercase;
}


This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.

Leave a Comment