codescracker


css

CSS Selectors



« Previous Tutorial Next Tutorial »


A selector is a pattern that is used to select 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 selector. As the CSS rule is divided into the following two parts.

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

CSS Universal Selector

The universal selector selects all the elements that are present in an HTML document.

You can use this selector to apply the same rule to all the elements of an HTML or XHTML document. The universal selector is represented by an asterisk symbol, as shown in the following code snippet.

*{}

The following code fragment shows the use of universal selector.

*
{
	margin:0;
	padding:0;
}

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

Example

Let's look at the following example. This example uses the CSS universal selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
		*
		{
			color: green;
		}
	</style>
</head>
<body>

<h2>CSS Universal Selector Tutorial</h2>
<hr/>
<p>This is tutorial on CSS universal selector.</p>
<hr/>
<h2>CSS Universal Selector Example</h2>
<p>This is example on CSS universal selector.</p>

</body>
</html>

Here is the sample output produced by the above CSS universal selector example code:

CSS Universal Selectors Example

CSS 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 fragment shows how to use the type selector in CSS.

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

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

Example

Let's look at the following example. This example demonstrates CSS type selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
		h2
		{
			color: green;
		}
	</style>
</head>
<body>

<h2>CSS Type Selector Tutorial</h2>
<hr/>
<p>This is tutorial on CSS type selector.</p>
<hr/>
<h2>CSS Type Selector Example</h2>
<p>This is example on CSS type selector.</p>

</body>
</html>

Below is the output produced by the above CSS type selector example code:

CSS Type Selector Example

CSS Class Selector

The class selector allows you to apply CSS rules to the elements that carry a class attribute whose value matches with the class attribute specified in the class selector.

Let's consider that you have an element, H1, with a class attribute whose values is intro, as shown in the following code fragment.

<H1 class="intro">Header 1</H1>

You can use a class selector in either of the two ways.

(i) By applying the CSS rule to all the elements that have the class attribute of the same value. The following code fragment shows how to apply the CSS rule.

.intro { font-family: sans-serif}

In the above code fragment, a period is followed by a value. The value is followed by braces which embeds the CSS rule within it. The CSS rule is applied to all the elements having the class attribute with intro as its value.

(ii) By applying the CSS rule to the H1 elements, whose class attribute contains intro as its value. The following code fragment shows how to apply the CSS style on H1 elements.

h1.intro { font-family: sans-serif}

In the above code fragment, an element name is followed by a value. The value is followed by braces, which embeds the CSS rule within it. The CSS rule is applied to all the H1 elements having the class attribute with intro as its value.

Example

Let's look at the following example. This example illustrates the CSS class selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
		.green
		{
			color: green;
		}
	</style>
</head>
<body>

<h2 class="green">CSS Class Selector Tutorial</h2>
<hr/>
<p>This is tutorial on CSS class selector.</p>
<hr/>
<h2>CSS Class Selector Example</h2>
<p>This is example on CSS class selector.</p>

</body>
</html>

Here is the sample output of the above CSS class selector example code:

CSS Class Selectors Example

As you can see from the above example, only the first heading is applied to display in red colored using the class selector.

Here is another example also demonstrates the CSS class selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
		h2.green
		{
			color: green;
		}
		p.red
		{
			color: red;
		}
	</style>
</head>
<body>

<h2 class="green">CSS Class Selector Tutorial</h2>
<hr/>
<p class="green">This is tutorial on CSS class selector.</p>
<hr/>
<h2 class="red">CSS Class Selector Example</h2>
<p class="red">This is example on CSS class selector.</p>

</body>
</html>

Now, the above CSS class selector example code will produce the following output:

CSS Class Selectors Example

CSS ID Selector

The value of the id attribute is unique within a document; therefore, the selector is applied only to the content of one element.

The following code fragment shows the h1 element having myHeader as the value of the id attribute.

<H1 id="myHeader">Hello World!</H1>

The following code fragment shows the id selector, which is represented by a hash symbol (#) and followed by the value of the id attribute.

#myHeader{ font-family: sans-serif }

In the above code fragment, myHeader is the value of the id attribute. The CSS rule is applied to the value of the id attribute.

Example

Let's look at the following example. This example shows how to select HTML elements using the CSS ID selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
	#green
	{
		color: green; 
	}
	</style>
</head>
<body>

<h2 id="green">CSS ID Selector Tutorial</h2>
<hr/>
<p>This is tutorial on CSS id selector.</p>
<hr/>
<h2>CSS ID Selector Example</h2>
<p>This is example on CSS id selector.</p>

</body>
</html>

Following is the sample output produced by the above CSS id selector example code:

CSS ID Selectors

Here is one more example also demonstrates the CSS ID selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
	h2#green
	{
		color: green; 
	}
	p#red
	{
		color: red;
	}
	</style>
</head>
<body>

<h2 id="green">CSS ID Selector Tutorial</h2>
<hr/>
<p id="green">This is tutorial on CSS id selector.</p>
<hr/>
<h2 id="red">CSS ID Selector Example</h2>
<p id="red">This is example on CSS id selector.</p>

</body>
</html>

Here is the output produced by the above CSS id selector example code:

CSS ID Selectors Example

CSS Child Selector

The child selector matches the element that is an immediate child of another element.

In the child selector, greater than symbol (>) is used as the combinator, as shown in the following code fragment.

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

A combinator is a symbol, such as >, <, and +, which shows the relationship between the two elements.

In the preceding code fragment, 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.

Example

Let's look at the following example. This is an example on CSS child selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
		body > p
		{
			color: green; 
		}
	</style>
</head>
<body>

<h2>CSS Child Selector</h2>
<hr/>
<p>Hello Browser!</p>
<p>This is CSS child selector</p>
<hr/>
<div>
<p>Paragraph in <div></p>
</div>
<p>Paragraph out of </div></p>
<ul>
	<li>list item 1</li>
	<li>list item 2</li>
</ul>

</body>
</html>

Here is the output of the above CSS child selector example code:

CSS Child Selectors

CSS Descendant Selector

The descendant selector matches an element that is a descendant of another element.

A descendant element is an element that is nested inside another element. In case of the descendant selector, white space is used as the combinator, as shown in the following code fragment.

table b { font-family: sans-serif }

In the above code fragment, CSS is applied to all the b elements that are nested within the table element.

Example

Let's look at the following example. This is an example on CSS descendant selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
		ul em
		{
			color: green; 
		}
	</style>
</head>
<body>

<h2>CSS Descendant Selector</h2>
<hr/>
<p>Hello Browser!</p>
<p>This is CSS descendant selector.</p>
<hr/>
Here is the unorganized lists:<br/>
<ul>
	<li>list <em>item</em> 1</li>
	<li>list <em>item</em> 2</li>
	<li>list <em>item</em> 3</li>
</ul>

</body>
</html>

The above CSS descendant selector example code will produce the output given below:

CSS Descendant Selector

CSS Adjacent Sibling Selector

The adjacent sibling selector selects all the elements that are adjacent siblings of a specified element. Sibling elements must have the same parent element.

The word adjacent means side-by-side, so no other element could exist between the adjacent sibling elements. To use an adjacent sibling selector, the plus symbol (+) is used as its combinator, as shown in the following code fragment of a CSS file.

H2+P { font-family: sans-serif }

Let's apply the preceding code fragment of a CSS file to the following HTML code fragment.

<H2>Heading</H2>
<P>The selector above matches this paragraph.</P>
<P>The selector above does not match this paragraph.</P>

In the above code fragment, the first paragraph matches the adjacent sibling selector, H2+P, because the P element is an adjacent sibling to the H2 element. The second paragraph does not match with the selector. Although it is a sibling of the H2 element, it is not adjacent to the element.

CSS Attribute Selector

The CSS attribute selector selects elements on the basis of some specific attributes or attribute values.

The following table describes most common types of attribute selectors.

Name Syntax Match Example
Hyphen selector [attribute|=value] Matches if the element has an attribute with a value followed by a hyphen [lang|=fr]
{ background-color:red; }
Existence selector [attribute] Matches if the element has a specific attribute a[title]
{ color:green; }
Equality selector [attribute=value] Matches if the element has an attribute with a specific value a[href=http://codescracker.com/]
{ font-weight:bold; }
Space selector [attribute~=value] Matches if the element has an attribute with space separated items that match with the value a[title~=Web]
{ background-color:red; }

Example

Let's look at the following example. This is an example on CSS attribute selector.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors Example</title>
	<style>
		input[type="text"]
		{
			color: green; 
		}
	</style>
</head>
<body>

<h2>Sign Up</h2>
<hr/>
<form action="demo.php" method="POST">
First Name:<br/>
<input type="text" spellcheck="false" name="fName"><br/>
Last Name:<br/>
<input type="text" spellcheck="false" name="lName"><br/>
Create Password:<br/>
<input type="password" name="pass"><br/>
Enter DOB:<br/>
<input type="date" name="dob" value="dob"><br/>
<input type="button" name="signUp" value="SignUp">

</body>
</html>

Here is the sample output produced by the above CSS attribute selector example code. This is the initial output:

CSS Attribute Selector

If you will start filling the form then the entered text inside the textual field First Name and Last Name will be colored as green.

CSS Attribute Selector example

CSS Query Selector

The querySelector() and querySelectorAll() methods accepts CSS selectors as parameters and return the matching element node in the document tree.

The querySelector() 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 elements are available, CSS selectors return the first matching element; or returns null, if no element is available.

The querySelectorAll() 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.

CSS element Selectors

The element selector selects elements based on the element name.

You can select all <p> elements on a page as shown in the example given below.

<!DOCTYPE html>
<html>
<head>
	<title>Element Selector Example</title>
	<style>
		p
		{
			text-align: center;
			color: red;
		}
	</style>
</head>
<body>

<p>Hello Browser!</p>
<p>This is CSS element selector.</p>

</body>
</html>

Below is the output of the above CSS element selector example code:

CSS Element Selector

CSS Multiple Style Rules

You may need to define multiple style rules for a single element. You can define these rules 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 semi colon (;). You can keep them in a single line or multiple lines. For better readability we keep them into separate lines.

CSS 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.

You can combine various class selectors together as shown below.

#content, #footer, #supplement
{
	position: absolute;
	left: 510px;
	width: 200px;
}

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test