Crus4

Menu

Menu

CSS Selectors

---

CSS Selectors as the name indicates, A CSS Selector selects the HTML element or elements that we wanna to style. There are five types of CSS Selectors:

• Simple selectors (It select elements based on name, class, id)
• Combinator selectors (It select elements based on a specific relationship between them)
• Pseudo-class selectors (It select elements based on a certain state)
• Pseudo-elements selectors (Used to select and style a particular part of an element)
• Attribute selectors ( It select elements based on an attribute or attribute value)

In this chapter we will learn the most basic CSS Selectors.

The CSS element Selector

The element selector selects a particular HTML element based on the element name.

Example

h1 {
  color:green;
}

Now, all <h1> elements on the page will be green in color.

CSS Class Selector

The class selector selects HTML elements that have a specific class attribute.

Example

.center {
  text-align: center;
  color: green;
}

Now, all the HTML elements with class=”center” will be green and aligned to center.

CSS id Selector

The id selector selects HTML elements that have a specific id attribute.

Example

#para1 {
  text-align: right;
  color: green;
}

Now, all the HTML Elements in a page with id “para1” will be green in color and aligned to right.

CSS class Selector

The class selector selects HTML Elements that have a specific class attribute.

Example

.center {
  text-align: center;
  color: green;
}

Now, all the HTML Elements with class “center” will be green and aligned to center.

CSS Universal Selector

The universal selector (*) selects all the HTML Elements on the page.

Example

* {
  text-align: center;
  color: green;
}

Now, all the HTML Elements on the page (p, h1-h6), will be green in color and aligned to center.

CSS Grouping Selector

The grouping selector selects all the HTML Elements that have same style definitions.

Example

h2 {
  text-align: center;
  color: green;
}

h3 {
  text-align: center;
  color: green;
}

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

In an above code you can see that h2, h3 and p elements have the same style definitions. Here we can also group the selectors, to minimize the code. Like this:

h1, h2, p {
  text-align: center;
  color: green;
}

Related Posts

Introduction to CSS

HTML Tutorial