Select Page

Type Selectors


A type selector is used to target HTML elements based on their tag names.


nanadwumor

April 28, 2024



  • Type selector targets HTML elements based on tag names.
  • Grouping selectors avoids repeating styles for similar elements.
  • The universal selector (*) targets all elements in an HTML document.
  • Grouping declarations combines multiple styles for one element.
  • Ignoring semicolons in CSS can lead to parsing errors and unexpected behavior.

RECOMMENDED ARTICLES


identifiers in CSS
identifiers in CSS

The secret power of CSS identifiers, the tiny names that give you full control over your styles! Identifiers are custom CSS names you create. CSS treats similar names with different cases as unique. Used in list counters like...

Images in CSS
Images in CSS

Did you know CSS can create images without using a single file? CSS uses URLs to display images. [crayon-68e668280dec4865452026-i/] serves images by device quality. Gradients generate images with colors only. Useful for backgrounds, designs, and...

inherit, initial, unset in CSS
inherit, initial, unset in CSS

Tiny CSS keywords can reset, copy, or undo styles with just one word. Keywords control styles without numbers inherit copies, initial resets, unset smart reset all applies to most properties, safer to limit revert returns to browser/user defaults...


A type selector is used to target HTML elements based on their tag names. For example, to apply styles to all <p> elements in a document, you would use this;

This selector targets all <p> elements and applies the specified styles to them. 

A type selector was previously  called an element selector. 

Example of a Stylesheet for HTML document is:

Grouping

If you want to apply the same style to another element, you can group the elements together without repeating the style. 

For example, the following style is applied to the six heading tags.

Instead of repeating the CSS rule for each heading element, we could group all the headings to be affected by the style by separating them with a comma. That’s,

Note that there should be comma separating the elements to tell the browser that more than one element is affected by the CSS style.

The Universal Selector

The universal selector is the asterisks(*) sign. This selector targets all the elements in the HTML document. For example,

sets the default margins and paddings of all the elements in your document to zero. Note that some elements have default margins and paddings.

Grouping Declarations

This can also be written horizontally as

Ignoring the semicolons

The semicolons delimit the CSS rules. The semicolons are necessary when writing CSS code. If you ignore a semicolon, it makes it difficult to parse the CSS rule. Example,

In the above, color : maroon does not end will a semicolon. Because of that, CSS parse the code as

It ignores the whitespace and appends the succeeding code until it gets to the semicolon. Because font-size : 30px is not a valid value for the color property, the color of the text does not change at all.

Grouping Selectors and Declarations

You can group selectors and declarations in one declaration block. For example, the CSS below selects all the heading tags — h1, h2, h3, h4, h5, h6 — and applies the CSS rules to it.