CSS Selector Examples

CSS Element Selector

The following paragraph describes a CSS element selector.

The element selector selects HTML elements based on the element name.

Here, all "p" elements on the page will be left-aligned with a mediumslateblue text color!

CSS id Selector

The following paragraph describes a CSS id selector.

This paragraph is not affected by the id selector, which is why it is still a mediumslate blue color aligned to the left.

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Here, anything with the id of #para1 will get a chocolate text color and be center-aligned!

CSS Class Selector

The following paragraph describes a CSS class selector.

The text above uses the id of #para1 which is why it has a chocolate text color and is center-aligned.

This paragraph is not affected by the class selector, which is why it is still a mediumslate blue color aligned to the left.

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Here, anything with the class of "class1" will get a green text color and be center-aligned!

Green and center-aligned heading

Green and center-aligned paragraph. Both this and the heading use the class of "class1."

CSS Universal Selector

The following paragraph describes a CSS universal selector.

The universal selector selects all HTML elements on the page.

Every element on the page will be affected by the style.

Here, all of the heading titles got a gray text color and are left-aligned since those styles are specified in the universal selector.

Many of the elements on this page were not impacted by the universal selector because of the specific styles incorporated with the selectors described above.

For example, all "p" elements on the page will remain left-aligned with a mediumslateblue text color because of the class selector for anything with a "p" tag.

The title at the very top has its own individual id tag, which is why it also was not impacted by the universal selector.

CSS Grouping Selector

The following paragraph describes a CSS grouping selector.

The grouping selector selects all the HTML elements with the same style definitions.

To minimize code, you can group the selectors by separating each selector with a comma.

Here, the h3, h4, and p1 elements have the same style definitions. They will get a red text color and be center-aligned!

This is a small heading!

This heading is even smaller!

Thank you for learning about CSS Selector examples!! (=^v^=)

In case you were wondering, the text above uses a specific class id to make it have different style settings from everything else on the page.