CSS Selectors

What is a selector?

In the lesson CSS Syntax, you’ve learnt that in every CSS rule, a selector selects HTML element(s) and then, the declaration applies formatting on those selected HTML elements. In this lesson, you’ll learn detail about the selectors and how to use these.

 

Why selectors are so important to understand?

Every professional webpage consists of lots of nested elements. In your development time, you may need to style an element which is nested in four levels deep or to style just one element but not 3 others of its category or to style an element after a particular element etc. As a coder, your goal is to select an HTML element effectively.

You can select an HTML element in many ways, but, selecting with proper selector and efficiently should be your goal as a good CSS coder.

So, you must have understood the importance of learning selectors. The better you’ll learn selectors the better you’ll write CSS.

 

Types of selectors

To know how to effectively select an HTML element, you have to know different types of CSS selectors. CSS (including CSSS3) offers various types of selectors to facilitate you to select your right selectors.

As CSS selector is the heart of the CSS rules and CSS provides lots of selector types, we’ve divided selector types into few lessons. In the remaining of this lesson, you’ll learn some basic CSS selectors.

Here are the basic selectors you’ll learn-

  1. Type selectors
  2. Class selectors
  3. ID selectors
  4. Grouping selectors

 

Type selectors/Tag selectors/Element selectors

Type selector is the most basic type of selectors. This selector selects a particular type of element in a webpage (the word “type” came for this reason). For example, to select all the paragraph elements (p) in a web page, you can use type selector.

As type selector uses HTML tags to select element, it is also called “tag selector”. For the same reason, it is also known as “element selector”.

Type selector syntax

Just mention the element name as the selector. See following-

element_name { declaration }

When you’ll use type selectors

When you want to put style effect on all the elements of the same type in your web page, you can use type selector. For example, to change the color of all the paragraph elements (p) in a web page, you can use the type selector and it will select all the paragraph elements.

Example:

HTML

<p>Schools of web offers web designing learning course.</p>
<p>Schools of web also offers web development learning course.</p>

CSS:

p {
    color:#6495ed;
}

Output:

Schools of web offers web designing learning course.

Schools of web also offers web development learning course.

Explanation:
As you can see, the type selector p has changed the text color to gray to both paragraphs.

 

Class selectors

A class selector is the way to apply a styling effect to one or more elements regardless of the element types. Class selector is a custom selector which means you can create your own class selector and can declare styling rules in it.

 

Syntax class selector

A class selector is consisted of a classname with a period in front of it. See following-

.classname { declaration }

 

Naming convention of a class name

  • A class name includes any alphanumeric characters but, the first character can’t be a number.
  • A class name may include hyphen (-) or underscore (_).
  • A class name must not include space in it.

 

Applying class selectors in HTML

  • To apply a class selector, mention the class name as the value of the class attribute in an HTML element. See the first example below.
  • You can also mention multiple classes separating by a space in a single HTML element. See the second example below.

 

When you’ll use class selectors

You can apply class selectors in the following situations-

  • You want to apply a style rule just on one element of that type of element in a web page.
  • You want to apply a style rule on selected elements on different types.

 

Example 1:

CSS:

gray-text {
    color:#4e4e4e;
}

HTML
To apply the above “gray_text” class to an element in an HTML page, add it as a value of class attribute. See following example-

<p>Schools of web offers web designing learning course.</p>
<p class=”gray-text”>Schools of web also offers web development learning course.</p>
<ul class=”gray-text”>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>AJAX</li>
</ul>

Output:

Schools of web offers web designing learning course.

Schools of web also offers web development learning course.

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • AJAX

Explanation:
The “gray-class” has only been applied to second p and ul elements.

 

Example 2:

HTML

<p class=”gray-text italic-text”>Schools of web offers web designing learning course.</p>
<p class=”gray-text”>Schools of web also offers web development learning course.</p>

CSS:

.gray-text {
    color:#4e4e4e;
}

.italic-text {
    font-style:italic;
}

Output:

Schools of web offers web designing learning course.

Schools of web also offers web development learning course.

Explanation:
Two classes “gray-text” and “italic-text” are applied in the first paragraph.

 

ID selectors

An ID selector is another custom selector, so you can define your own ID selectors. In a single webpage, you can only style one element with an ID selector.

 

ID selector syntax

An ID selector is consisted of an ID value with a hash sign in front of it. See following-

#ID_value { declaration }

 

Naming convention of an ID name

Same naming convention as the class name.

 

When you‘ll use ID selectors

You’ll use an ID selector to select a unique part (for example, logo, footer, top menu etc.) of a webpage.

Example

CSS: 

#footer {
    color:#4e4e4e;
    font-style:italic;
}

HTML
To apply the above “footer” id to an element in an HTML page, add it as a value of ID attribute. See following example-

<section id=”footer”>
    @copyright 2014 all right reserved.
</section>

Output:

@copyright 2014 all right reserved.

Explanation:
In a website, there is only one footer at the bottom, so we identify that part with an id attribute and style that with an ID selector which is the value of that id attribute.

 

Grouping selectors

Sometimes you’ll find that you’re writing same declaration in multiple selectors. It increases lines and the file size. Is it not better if you can group all the selectors and write the declaration once and it will effect on that group? Group selector does exactly that

 

Grouping selector syntax

In a group selector, there is one comma between two selectors. See following-

selector1, selector2, selector3, selector4 ….. { declaration }

 

When you’ll use grouping selectors

When you’ll see that you’re using same declaration multiple times for different selectors in your style sheet, then, combine those selectors as a group and create a group selector.

 

Example:

CSS:

h1, h2, h3, h4 {
font-color: #6495ed;
font-style: italic;
}

As you can see from the above example that four different selectors are combined together to make a grouping selector and the style declaration will affect on all those four elements.

The above grouping selector is the efficient way of writing the following code which styles the same elements but separately.

CSS:

 h1 {
font-color: #6495ed;
font-style: italic;
}

h2 {
font-color: #6495ed;
font-style: italic;
}

h3 {
font-color: #6495ed;
font-style: italic;
}

h4 {
font-color: #6495ed;
font-style: italic;
}

In the above example, I only used type selectors in the grouping selectors. You can use other selectors in the group list.

Combining selectors

In the above you’ve seen few types of selectors. You’re not limiting to use one selector in one style rule. In fact, you can combine one or more types of selectors to preciously select one or more elements.

 

In the next lessons, you’ll learn the other CSS selectors.