Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Selectors : Select Multiple Elements

It is possible to give several items on your page the same style even when they don't have the same class name. To do this you simply list all of the elements you want to style and put a comma between each one.

Imagine your job is to target multiple elements in the bucket ball game. You would group 6 out of 12 of the cups to be yellow and the other 6 to be red. You could then add the 2 yellow balls to the same definition that you gave to the yellow buckets because they are all yellow. Next, you would be able to group 4 balls and 1 bag to be both black and white. But you would have an extra line of code to give the ball bag its own unique descriptive CSS stating that its size is larger it is made of nylon and has a handle because none of the other items fit this description. Make sense?

selecting multiple elements

How To Select Multiple Elements To Style The Same

After you watch the video on targeting multiple elements in CSS, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "Now I know how to target multiple CSS elements". But if you still don't understand something, please write that in your comments too. (4 minutes)

Element Name Selectors

HTML

html code with class names

CSS

code for selecting multiple elements

RESULTS

results select multiple elements with css

NOTES


Notice how the font is defined for both the h4 and the "testContainer" even though there are images inside of the testContainer and images don't have a font property. That is fine. If a property is set for an attribute that an element does not support it will simply be ignored. You then have a paragraph element, an item with a class name, and an item with an id all defined in one line. Remember you can mix element names, class names, and class IDs in a group and give them all the same styles. You simply place a comma between each one.


Do you believe you understand how to select multiple elements? If yes, hit the next button below and continue learning more about CSS.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved