Html style all elements

CSS Selector Types – How to Select Elements to Style in CSS

Dillion Megida

When you want to style an element with CSS, you first have to «select» it. In this article, I’ll show you seven (7) ways in which you can do that.

Here’s the syntax for styling elements in CSS:

You have the selector that «targets» the element(s) you want to style, then you have an open curly brace. After the brace, you have your styles using different CSS properties, and you close it with a closing curly brace.

There are numerous ways to target elements. You can call these methods Selector Types.

Here is a video with examples on Ways to Select Elements to Style in CSS if you prefer that.

Here are seven selector types in CSS.

1. How to Use the Universal Selector (*) in CSS

The Universal Selector, asterisk (*), allows you to select ALL elements of any type for styling. Here is an example:

Let’s say we use this style for the following HTML:

 
CSS styles
 
How to apply styles
 
 
  

You can see that the body , h1 , p , div , and img elements all have the border of 1px solid black because we used the universal selector.

2. How to Style Elements by Tag Name in CSS

You can also select elements for styling by using their tag names. Here’s an example:

These style declarations applies a color of red to all p elements and a width and height of 200px to all img elements.

Here’s how the style above works with this HTML:

I am a span 
There is a span above me
 

You can see that the span is not styled – only the img and the p are.

3. How to Style Classes in CSS

Elements accept different attributes (also called properties), including classes. You can target an element based on the class you have specified on it. Here is an example:

There are two div s here, but only one has a class attribute with the container value. You can style the one with the class using a period (.) then the class like this:

From the CSS, we specified that all div elements should have a border of 1px solid purple. But for the element with a container class , you can see from the result that it has a border-width of 20px.

4. How to Style Ids in CSS

Similar to the class attribute, you can specify an id on an element which you can target from CSS for styling.

You can target the id element here by using a hash (#) and then the id like this:

Using the element (whether it’s a div , p , or any type) with the container id , we applied styles to only the second div element.

Unlike classes, however, id s must be unique. Two or more elements cannot have the same id as that would cause unexpected behaviors.

5. How to Style Other Attributes in CSS

We’ve seen how to target class and id attributes. What if you wanted to target other attributes? Well you can; using square brackets ([attr]). How does that work?

In this example, we have two elements: an a tag and a p tag. To style both elements, you can use their tag names directly:

The comma allows you to apply styles to multiple selectors at once.

But another way you can style both elements is using their attributes. They both have a href attribute.

Just keep in mind that the href attribute is not supported in p tags though. I’m just using it to illustrate an example.

Here’s how you can use the href attribute to style both elements:

This CSS will match all elements with the href attribute.

Both elements have the href attribute and so they are selected for our styles. Here, we used the href attribute without a value. You can also specify a value to be specific about your target like this:

Only the a tag has the href attribute with the # value so that is the only element that matches our styles, as you can see from the image above.

6. How to Use Pseudo-Classes in CSS

Pseudo-classes are selector types that allow you to select elements in a particular state. To name a few, here are some supported states:

• hover (when the mouse floats over an element)
• disabled (when an element such as an input or button is disabled)
• required (when a form element is required)

And many more you can find in the Pseudo-classes MDN Documentation.

You can apply styles when elements are in these states. You select the state by using a colon (:) followed by the state. Here is an example:

The line is important to specify that it is HTML5 so the pseudo classes can work.

This CSS would apply these styles to any element you hover over. Here’s the result»:

The image on the left is without the hover state. On the right, you can see the styles applied to the body and the button because we’re hovering over them.

By hovering over the button , you are also hovering over the body because the button is a child of the body .

7. How to Use the Pseudo Element Selector in CSS

Pseudo-elements (different from Pseudo Classes) are used to select a «specific part of an element». Not the whole element – just a part. And you can also use them to add pseudo (artificial) elements to an existing element.

Here are some supported pseudo-element selectors:

• selection : the highlighted part of an element
• first-line : the first line of a paragraph
• placeholder : the placeholder text of an input element

And many more you can find in the MDN Pseudo Elements Documentation.

To apply styles using a pseudo-element selector, you use double colons (::) followed by the pseudo-element. Here’s an example:

And here’s the CSS for this HTML:

The ::placeholder pseudo-element selector styles the «placeholder part» of all form elements. As you can see in the example above, the input element itself has a color style of blue but the placeholder part has different styling.

Wrapping up

In this article, I’ve shown you seven ways in which you can target elements you want to style. We’ve seen:

• the universal selector, for selecting all elements
• tag names for selecting elements that match a tag name
• classes for selecting elements with a class attribute
• ids for selecting an element with an id attribute
• attributes for selecting elements that have an attribute with or without a specified value
• pseudo-classes for selecting elements in a specific state
• pseudo-elements for selecting specific parts of an element

You can also combine these selectors to be more specific about the element you want to target. You do this using Combinators.

Combinators allow you to use multiple selectors to target elements based on the relationship between the elements that match the selectors. Here’s an article I wrote about combinators if you want to learn more.

To give you a quick preview – combinators are used between multiple selector types, and they allow you to style elements based on the relationship they have with other elements.

Источник

Html style all elements

Last updated: Jan 12, 2023
Reading time · 2 min

# Change a Style of all Elements with a specific Class in JS

To change the styles of all elements with a specific class:

1. Use the querySelectorAll() method to get a collection of the elements with the specific class.
2. Use the forEach() method to iterate over the collection.
3. On each iteration, use the style object to change the element’s styles.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> style> .box  background-color: salmon; color: white; width: 150px; height: 150px; margin: 10px; > style> head> body> div class="box">Box content 1div> div class="box">Box content 2div> div class="box">Box content 3div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const boxes = document.querySelectorAll('.box'); boxes.forEach(box =>  box.style.backgroundColor = 'purple'; box.style.width = '300px'; >); 

We used the document.querySelectorAll method to select all DOM elements with a class of box .

The function we passed to the NodeList.forEach method gets called with each element in the NodeList .

Copied! 
const boxes = document.querySelectorAll('.box'); boxes.forEach(box =>  box.style.backgroundColor = 'purple'; box.style.width = '300px'; >); 

Note that multi-word properties like background color are camel-cased when accessed on the style object.

# Change a style of all Elements with a specific Class using getElementsByClassName

You could also use the document.getElementsByClassName method to select the elements with the specific class.

However, the method returns an HTMLCollection .

Make sure to convert the HTMLCollection to an array before calling the forEach() method.

Copied! 
const boxes = Array.from( document.getElementsByClassName('box') ); boxes.forEach(box =>  box.style.backgroundColor = 'purple'; box.style.width = '300px'; >); 

The code snippet achieves the same result by using the getElementsByClassName() method.

We used the Array.from method to convert the HTMLCollection to an array before calling the forEach method.

If I open my browser, I can see that the inline styles have been successfully applied to all elements with the class of box .

Alternatively, you can iterate over the HTMLCollection directly without converting it to an array by using a for. of loop.

Copied! 
const boxes = document.getElementsByClassName('box'); for (const box of boxes)  box.style.backgroundColor = 'purple'; box.style.width = '300px'; > 

The for. of statement is used to loop over iterable objects like arrays, strings, Map , Set and NodeList objects and generators .

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

CSS * Selector

Select all elements, and set their background color to yellow:

More «Try it Yourself» examples below.

Definition and Usage

The * selector selects all elements.

The * selector can also select all elements inside another element (See «More Examples»).

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

CSS Syntax

More Examples

Example

Select all elements inside elements and set their background color to yellow:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник