CSS element Selector

CSS element selector selects all the elements with the specified element name. CSS styles written under the element selector affect each and every element that matches the specified element name.

In the example below, the element selector selects all the <p> elements on the page and applies the same styles to each of them. Try it out to see how it works:

Example:

p{
    background: yellow;
    border: 2px solid blue;
    padding: 5px;
}

In the example below, the element selector selects all the <div> elements and applies a yellow background to each of them. Try it out:

Example:

div{
    background: yellow;
}

CSS Element Selector Syntax

The element selector has the following syntax:

element{
    CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS class Selector

CSS class selector selects all the elements that have the specified class attribute. The class selector is used when we want to apply the same CSS styles to multiple elements within a page.

To select multiple elements using the class selector, use a period sign(.) followed by the name of the class. For example, .success, .center, etc.

In the example below, the class selector selects all the HTML elements that have the class 'success' and applies same set of styles to each of them. Try it out:

Example:

.success{
  background: springgreen;
  padding: 10px;
}

It is also possible to select only specific types of elements that have the specified class name. To do this, you have to first write the element name, then the period sign(.), followed by the name of the class. For example, div.myClass.

In the example below, the class selector selects all the <div> elements that have a class 'success'.

Example:

div.success{
  background: springgreen;
  padding: 10px;
  margin-bottom: 10px;
}

CSS Class Selector Syntax

The class selector has the below syntax:

.className{
    CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS id Selector

CSS id selector selects an element that has the specified id attribute. As an id is always unique within a page, therefore, the id selector always selects a single element from the page and applies CSS styles to it.

To select an element using the id selector, use a hash symbol(#) followed by the id of the element. For example, #myId.

In the example below, the id selector selects a <p> element that has id="p2" and applies CSS styles to it. Try it out to see how it works:

Example:

#p2{
  background: yellow;
  border: 2px dashed blue;
  padding: 10px;
}

CSS id Selector Syntax

#id{
    CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS Universal Selector

CSS universal selector selects all the elements on a page. Therefore, CSS styles applied to a universal selector affects each and every element(including <html> and <body> also) on the page.

The universal selector is represented by an asterisk(*) character.

In the example below, the universal selector(*) applies the same styles to each and every element on the page. Try it out to see how it works:

Example:

*{
  color: red;
  text-decoration: underline;
}

The universal selector can also be used to select all the elements inside a specific element. For example, selecting all the elements inside a <div> element.

In the example below, the universal selector selects all the elements that are inside the <div> element and applies the same styles to each of them.

Example:

div * {
  background: yellow;
  border: 2px solid blue;
  padding: 10px;
}

CSS Universal Selector Syntax

The universal selector has the following syntax:

*{
    CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS Descendant Selector

CSS descendant selector selects all the matching descendants of an element. The descendant selector is used when we want to style each and every element of a given type that is contained inside a given element. For example, all <p> elements that are inside a <div> element, or all <li> elements that are inside a <ul> element and so on.

To select the descendants of an element, use a white space between the parent and the descendant. For example, div p, ul li, etc.

In the example below, the descendant selectors selects all the <p> elements that are inside the <div> element.

Example:

div p{
   background: yellow;
   padding: 5px;
   border: 2px solid blue;
}

In the example below, the descendant selector selects all the <li> elements that are inside a <ul> element. Try it out to see how it works:

Example:

ul li{
   background: yellow;
   margin: 5px;
}

CSS Descendant Selector Syntax

The descendant selector has the below syntax:

parent descendant{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS Child Selector

CSS child selector selects all the elements that are direct children of a given element.

Unlike, the descendant selector, the child selector only selects those descendants that are direct children of the element. The descendants that are not the direct children of the given element remain unaffected.

To select the direct children of an element using the child selector, use a greater than symbol(>) between the parent and the child. For example, div > p, ul > li.

In the example below, the child selector selects all the <p> elements that are direct children of the <div> element and applies the same style to each of them. Try it out:

Example:

div > p{
   background: yellow;
   padding: 5px;
   border: 2px solid blue;
}

The child selector in the example below selects all the <li> elements that are direct children of the <ul> element and puts a yellow background to each of them.

Example:

ul > li{
   background: yellow;
   margin: 5px;
}

CSS Child Selector Syntax

The child selector has the following syntax:

parent > child{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS Adjacent Sibling Selector

CSS adjacent sibling selector selects the adjacent sibling of the specified element. An element is called adjacent sibling of a given element if it is placed just next to it in the HTML document.

To select an element using the adjacent sibling selector use an addition symbol(+) between the element and its sibling.

In the example below, the adjacent sibling selector selects the <p> element that is placed just next to the <div> element in the document and applies CSS styles to it.

Example:

div + p{
   background: yellow;
   border: 2px solid blue;
   padding: 5px;
}

The adjacent sibling selector in the example below selects a <p> element that is placed just next to the <ul> element. Try it out:

Example:

ul + p{
   background: yellow;
   border: 2px solid blue;
   padding: 5px;
}

CSS Adjacent Sibling Selector Syntax

The adjacent sibling selector has the following syntax:

element + sibling{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS General Sibling Selector

CSS general sibling selector is almost similar to the adjacent sibling selector except that it selects all siblings of the given elements instead of the adjacent sibling only.

To select all the general siblings of an element, use a tilde symbol(~) between the element and the sibling. For example, div ~ p, ul ~ p, etc.

In the example given below, the general sibling selector selects all the <p> elements that are siblings of the <div> element and applies the same styles to each of them.

Example:

div ~ p{
   background: yellow;
   border: 2px solid blue;
   padding: 5px;
}

The general sibling selector in the example below selects all the <p> elements that are siblings of the <ul> element.

Example:

ul ~ p{
   background: yellow;
   border: 2px solid blue;
   padding: 5px;
}

CSS General Sibling Selector Syntax

The general sibling selector has the following syntax:

element ~ general_sibling{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS Grouping Selector

There may be a situation when we want to apply same CSS styles to multiple elements. Now, one way to do this is, select each of these elements using any selector individually and apply the styles. But, this will result in the repetition of code and need more effort and time.

The grouping selector can help in such situations. The grouping selector groups these selectors together and applies the same set of CSS styles to each of them in just a single declaration.

To group multiple selectors using the grouping selector, separate each of them using a comma(,).

In the example below, the grouping selector applies same styles to each of the <h1>, <h2>, and <p> elements.

Example:

h1, h2, p{
   background: yellow;
   border: 2px solid blue;
   padding: 5px;
}

You can combine any type of CSS selector using the grouping selector, for example: id selector, class selector, element selector, etc.

In the example below, we have combined the ‘red’ and ‘blue’ class using the grouping selector.

Example:

.red, .blue{
    	text-align: center;
        background: yellow;
        padding: 5px;
        border: 1px solid blue;
}

CSS Grouping Selector Syntax

The grouping selector has the below syntax:

selector1, selector2,...{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

CSS [attribute] Selector

CSS [attribute] selector selects all the elements that have a given attribute. For example, it can select all the <img> elements that have an alt attribute or select all the <a> elements that have a target attribute regardless of the value of the attribute.

In the example below, the [attribute] selector selects all the <a> elements that have a target attribute and sets their background color to yellow. Try it out:

Example:

a[target]{
  background: yellow;
}

Selects all the <img> elements that have an alt attribute and set their border-radius to 50%.

Example:

img[alt]{
  border-radius: 50%;
}

CSS Syntax

The [attribute] selector has the following syntax:

[attribute]{
   CSS styles
}

Related Pages

CSS Tutorials: CSS Attribute Selectors