Css item by type

The CSS type selector

The CSS Type selector (also called an element type selector) is used to target HTML elements by their type. The type could be any of the built-in HTML elements, such as ,

, .

We use the following syntax to style elements via the type selector

element-name  property-name: value; >

For example let’s style this button element via its type selector:

button  font-size: 32px; padding: 1rem; color: red; >

When you use the type selector you style elements on your website broadly.

So if you have 10 button elements on your website, and you use the CSS from above, then every button will get that same styling. This may or may not be what you want, depending on the context.

It can be a good idea to set some broad base styling directly on HTML elements. However, the base styling should be as unspecific as possible. It should serve as a way to enforce meaningful visual consistency across your UI — and avoid needless code repetition.

Areas you often want to be consistent with:

• Fonts (also called typefaces)
• Font size
• Line height
• Colors
• Spacing (whitespace)

For example, it’s a good practice to be consistent with your choice of font families in your UI. You don’t want to use 5 different fonts, it makes your UI look weird and inconsistent. You want somewhere between 1 and a maximum of 3 different font families on most websites.

Let’s say you want to use two types of fonts on your website:

In this case, it makes perfect sense to use the broad type selector to apply those font families:

/* Roboto is a sans serif*/ html, body  font-family: roboto; > /* Merriweather is a serif*/ p, li  font-family: merriweather; >

With the CSS above, every HTML element will use the Roboto font, except paragraphs and lists which will use Merriweather.

When to not use the type selector?

It’s generally a bad practice to “over style” any element with a broad stroke because it affects every representation of that element on your page.

For example, don’t do this in your CSS:

button  font-size: 1.125rem; padding: 1.5rem; margin-top: 1rem; border-radius: 8px; border: 1px solid #444444; color: green; background-color: black; transition: all 1s ease-in; >

The above will apply a bunch of styles to every button element on your website. Chances are that you have multiple buttons with different roles on your website. Although you want the base UI design to be consistent (especially typography) you probably don’t want them all to look or behave exactly the same. Especially things like margin values are dangerous to apply broadly to any given element type.

Of course, you can always override any base styling on an element by using a class selector. However, the purpose of using classes is not to spend a bunch of time undoing/overriding base styles passed down from the element selector.

The purpose of using classes on elements is:

• To extend base styles on elements in specific situations that call for it. For example, you might want the call to action button on your hero sections to be slightly bigger than everywhere else.
• Reusability. Classes can be reused infinitely, which makes them flexible and efficient. A great example of that is the Tailwind CSS framework which is based on single-purpose utility classes, also known as functional CSS.

• Use the type selector to establish a baseline of general styles that enforce your brand’s visual identity through consistency.
• Use classes (and sometimes ids) to build on top of the base styles, to style elements based on their role in the specific environment they’re in.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

CSS selectors

In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we’ll run through the different types in great detail, seeing how they work.

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:	To learn how CSS selectors work in detail.

What is a selector?

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.

In other articles you may have met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as h1 , or a class such as .special .

In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the Level 3 Selectors specification and Level 4 Selectors specification, which are both mature specifications, therefore you will find excellent browser support for these selectors.

Selector lists

If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an h1 and also a class of .special , I could write this as two separate rules.

h1  color: blue; > .special  color: blue; > 

I could also combine these into a selector list, by adding a comma between them.

White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.

In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.

When you group selectors in this way, if any selector is syntactically invalid, the whole rule will be ignored.

In the following example, the invalid class selector rule will be ignored, whereas the h1 would still be styled.

h1  color: blue; > ..special  color: blue; > 

When combined however, neither the h1 nor the class will be styled as the entire rule is deemed invalid.

Types of selectors

There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article’s subarticles we will look at the different groups of selectors in more detail.

Type, class, and ID selectors

This group includes selectors that target an HTML element such as an .

It also includes selectors which target a class:

Источник

Type, class, and ID selectors

In this lesson, we examine some of the simplest selectors, which you will probably use most frequently in your work.

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:	To learn about the different CSS selectors we can use to apply CSS to a document.

Type selectors

A type selector is sometimes referred to as a tag name selector or element selector because it selects an HTML tag/element in your document. In the example below, we have used the span , em and strong selectors.

Try adding a CSS rule to select the element and change its color to blue.

The universal selector

The universal selector is indicated by an asterisk ( * ). It selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator). In the following example, we use the universal selector to remove the margins on all elements. Instead of the default styling added by the browser — which spaces out headings and paragraphs with margins — everything is close together.

This kind of behavior can sometimes be seen in «reset stylesheets», which strip out all of the browser styling. Since the universal selector makes global changes, we use it for very specific situations, such as the one described below.

Using the universal selector to make your selectors easier to read

One use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. For example, if we wanted to select any descendant elements of an element that are the first child of their parent, including direct children, and make them bold, we could use the :first-child pseudo-class. We will learn more about this in the lesson on pseudo-classes and pseudo-elements, as a descendant selector along with the element selector:

article :first-child  font-weight: bold; > 

However, this selector could be confused with article:first-child , which will select any element that is the first child of another element.

To avoid this confusion, we can add the universal selector to the :first-child pseudo-class, so it is more obvious what the selector is doing. It is selecting any element which is the first-child of an element, or the first-child of any descendant element of :

article *:first-child  font-weight: bold; > 

Although both do the same thing, the readability is significantly improved.

Class selectors

The class selector starts with a dot ( . ) character. It will select everything in the document with that class applied to it. In the live example below we have created a class called highlight , and have applied it to several places in my document. All of the elements that have the class applied are highlighted.

Targeting classes on particular elements

You can create a selector that will target specific elements with the class applied. In this next example, we will highlight a with a class of highlight differently to an heading with a class of highlight . We do this by using the type selector for the element we want to target, with the class appended using a dot, with no white space in between.

This approach reduces the scope of a rule. The rule will only apply to that particular element and class combination. You would need to add another selector if you decided the rule should apply to other elements too.

Target an element if it has more than one class applied

You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site.

In the example below, we have a that contains a note. The grey border is applied when the box has a class of notebox . If it also has a class of warning or danger , we change the border-color .

We can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. You’ll see that the last doesn’t get any styling applied, as it only has the danger class; it needs notebox as well to get anything applied.

ID selectors

An ID selector begins with a # rather than a dot character, but is used in the same way as a class selector. However, an ID can be used only once per page, and elements can only have a single id value applied to them. It can select an element that has the id set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. You can see both of these uses in the following example:

Warning: Using the same ID multiple times in a document may appear to work for styling purposes, but don’t do this. It results in invalid code, and will cause strange behavior in many places.

Note: As we learned in the lesson on specificity, an ID has high specificity. It will overrule most other selectors. In most cases, it is preferable to add a class to an element instead of an ID. However, if using the ID is the only way to target the element — perhaps because you do not have access to the markup and cannot edit it — this will work.

Summary

That wraps up Type, class, and ID selectors. We’ll continue exploring selectors by looking at attribute selectors.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник