Tutorials Tonight's Logo

CSS SELECTORS


Before applying CSS on HTML elements we must first learn how to select the element first. In this tutorial, we will learn about what is CSS selectors and different CSS selectors type.

Introducing CSS selectors

The CSS selector is used to select an HTML element in the webpage to style.

It is part of the CSS ruleset. CSS provides us with various ways to select an element. Some of the ways are mentioned below.

CSS selectors

As you can see in the above image CSS selector target single or multiple HTML elements that match the selection.

When the selector is matched with HTML elements then CSS declarations defined in the block is applied to those HTML elements.

Note: In CSS there is no selector or combinator to select parent, sibling of parent elements and child of parent sibling.


Types of CSS selectors

There are several different types of CSS selectors. We will discuss here few main and most commonly used selectors.

  1. Universal selector CSS
  2. Element selector
  3. Class selector CSS
  4. Id selector CSS
  5. Group selector
  6. Attribute selector

1. Universal selector CSS

The universal selector (*) selects all the elements on the webpage. Many developers use this selector to remove all the default margins and padding.

Universal selector starts with an asterisk symbol (*).

* {
  margin: 0;
  padding: 0;
  color: steelblue;
}
▶ Run the code

The CSS code above in the example selects all the elements in the webpage and remove all the margins, padding and set color to texts.


2. Element selector

If you want to select all the same element in the webpage then use an element selector.

The element selector selects all the elements in the webpage on the basis of its name. To select the element write the element name and provide CSS properties in the block.

p {
  color: blue;
  text-align: center;
}

a {
  color: red;
}
▶ Run the code

In the above example there are 2 element selectors, 1st select all the paragraph in the webpage and 2nd select all the anchor texts.



3. CSS class selector

The class selector is used to select the element which has a class attribute. It is the most commonly used selector in CSS.

It is written with a period(.) followed by the class name and the CSS code declaration is given in curly braces.

To select any HTML element just give the class attribute to the element with the name of the class you want to select.

.box{
  padding: 10px;
  border: 1px solid blue;
}
▶ Run the code

You can add multiple classes to a single element. The element will reflex all CSS declarations of added class.

.class1 {
  color: red;
}

.class2 {
  font-size: 25px;
}

.class3 {
  text-align: center;
}
▶ Run the code

4. Id selector CSS

The id selector is used to select a unique targeted element.

The id attribute of the element is used to target the element.

To select an element with id use a hash (#) symbol with id name.

#user {
  color: red;
  font-size: 20px;
}
▶ Run the code

5. Group selector

You can group multiple same or different types of selectors for the same style definition.

Suppose we have the same CSS declarations for the multiple-element as shown in the example below.

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

Instead of defining CSS property like as above we can use group selector.In group selector we define single CSS code and selector is separated with comma.See the example below:

p,
h1,
h3 { 
    color : red; 
    background-color : yellow; 
    text-align : center; 
}
▶ Run the code

You can also use different selectors together as a group selector on an element.

p,
.heading,
#tag {
  color: red;
  background-color: yellow;
  text-align: center;
}
▶ Run the code

6. CSS attribute selector

The attribute selector selects the element in the webpage based on their attribute or by the value of the given attribute.

To select an element based on an attribute write the attribute name in a square bracket and give its value in quotes [attribute="value"].

[title="my title"] {
  color: red;
  background-color: yellow;
  text-align: center;
}
▶ Run the code

You can also select all elements with a given attribute regardless of their value.

[title] {
  color: red;
  background-color: yellow;
  text-align: center;
}
▶ Run the code

Points to remember:

  1. CSS selector is used to select elements in the webpage to apply CSS ruleset on it.
  2. The most commonly used selector is the class selector.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.