CSS Type Selector

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS type selector is the simplest type of CSS selector. It selects all elements of a given type within a document. To use a type selector, simply write the name of the element you want to select. For example, the selector p will select all paragraph elements in a document.

Type selectors can be used to select any type of HTML element, including headings, paragraphs, lists, images, and more. They can also be used to select elements from within a specific namespace. For example, the selector @namespace example url(http://www.example.com); example|h1 will select all h1 elements in the example namespace.

Here are some examples of CSS type selectors:

/* Selects all paragraph elements */
p {
  color: blue;
}

/* Selects all heading elements */
h1, h2, h3, h4, h5, h6 {
  font-size: 20px;
}

/* Selects all image elements */
img {
  width: 100px;
}

/* Selects all `h1` elements in the `example` namespace */
@namespace example url(http://www.example.com);
example|h1 {
  color: red;
}

Type selectors are a very useful tool for CSS styling. They can be used to select any element on a page and apply CSS properties to it. This makes it easy to style your web pages in a consistent and efficient way.

Syntax

element {
    css declarations;
}

Example

span {
   color: #3366ff;
   background: #ffff99;
}

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS type selector.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes