A type selector is used to target HTML elements based on their tag names.
nanadwumor
- 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
Combining a class and pseudo-class
Can you combine class and pseudo-class to style elements? Learn how to precisely target and style elements with advanced pseudo-classes in CSS! Combining classes and pseudo-classes styles elements based on both their type and class, such as...
Types of Pseudo-classes
Know the types of Pseudo-classes, master CSS styling with pseudo-classes for precise element targeting and design control! Structural pseudo-classes style elements based on their position or hierarchy in the HTML document, like...
How to use Pseudo-classes in CSS
Discover how pseudo-classes in CSS enhance user interaction and styling! Pseudo-classes apply styles based on user interaction, element position, or relationships between elements. Normal classes are applied directly as attributes, whereas...
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;
|
1 2 3 |
p { /* Styles here */ } |
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:
|
1 2 3 4 |
html {color: black;} h1 {color: red;} h2 {color: brown;} a{ decoration: none;} |
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.
|
1 2 3 4 5 6 |
h1{ font-family : Tahoma;} h2{ font-family : Tahoma;} h3{ font-family : Tahoma;} h4{ font-family : Tahoma;} h5{ font-family : Tahoma;} h6{ font-family : Tahoma;} |
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,
|
1 |
h1, h2, h3, h4, h5 , h6 { font-family : Tahoma;} |
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,
|
1 2 3 |
*{ margin : 0 padding : 0; } |
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
|
1 2 3 4 5 |
[/et_pb_text][et_pb_text ol_position="outside" module_id="public-keyword" _builder_version="4.22.1" _module_preset="default" text_font="Raleway||||||||" text_text_color="#000000" text_font_size="25px" text_line_height="1.4em" ul_font="Raleway||||||||" ul_line_height="1.6em" ol_font="Raleway||||||||" ol_line_height="1.5em" hover_enabled="0" text_font_size_tablet="23px" text_font_size_phone="20px" text_font_size_last_edited="on|desktop" inline_fonts="Courier Prime" global_colors_info="{}" theme_builder_area="post_content" sticky_enabled="0"]<p>can be grouped for the element <h1> as</p>[/et_pb_text][et_pb_text ol_position="outside" module_id="public-keyword" _builder_version="4.22.1" _module_preset="default" text_font="Raleway||||||||" text_text_color="#000000" text_font_size="25px" text_line_height="1.4em" ul_font="Raleway||||||||" ul_line_height="1.6em" ol_font="Raleway||||||||" ol_line_height="1.5em" hover_enabled="0" text_font_size_tablet="23px" text_font_size_phone="20px" text_font_size_last_edited="on|desktop" inline_fonts="Courier Prime" global_colors_info="{}" theme_builder_area="post_content" sticky_enabled="0"]<pre lang="css">h1{font-family : Tahoma; font-size : 30px; color : maroon; background-color : white; } |
This can also be written horizontally as
|
1 |
h1{font-family : Tahoma; font-size : 30px; color : maroon; background-color : white; } |
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,
|
1 2 3 4 5 |
h1{font-family : Tahoma; color : maroon font-size : 30px; background-color : white; } |
In the above, color : maroon does not end will a semicolon. Because of that, CSS parse the code as
|
1 |
color : maroon font-size : 30px; |
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.
|
1 2 3 4 5 6 7 8 |
h1, h2, h3, h4, h5, h6{ color : blue; background-color : yellow; font-family: Tahoma, sans serif; margin : 10px; padding : 5px; border : 1px solid black; } |
Recent Comments