Target Multiple Elements in CSS | CSS Selectors Tutorial | One Line of Code | Group Selectors

Targeting Multiple Elements
Do you want to know how to target multiple elements in CSS?
In this video I will show you how easy it is to group selectors in CSS - which results in fewer lines of code. This video and more information on targeting multiple elements can be found on this web page: https://www.campsitecoders.com/LEARN/CSS3/select-by-multiple-elements.php

Video created by: #susanwinters214

The #HTML Page:
So if you look at the HTML code in this file you will see that I have many different elements on the page. I have the following html elements on my web page:
1 - h4 html element
2 - paragraph tags - one of them has a class ID and the other one does not.
1 - unordered list (aka a bullet list)
5 images - 4 of those images have a class name but one of those images does not.
1 wrapper div with an id of testContainer.

The #CSS Page:
Now - let's look at the CSS for this web page.
On the first line I have defined the CSS rules for the h4 and the wrapper for all of these elements (which I gave an id name of tentContainer. You'll see that I've set the font color as green & font-family as Verdana for both of these items.
Even though the tentContainer has images inside of it and images don't have a font color or font-family that is fine to code your CSS on 1 line like this. If you define an element with an attribute that the element doesn't support, it will just be ignored. But what these 2 items DO share is the width. So we saved ourselves time by grouping these 2 elements together in 1 line of code.
On the 2nd line of CSS, you'll see that I have 3 items defined (.imgTents, #travel, and a p tag)
4 out of 5 of the images have a class name of "imgTents" and 1 images has no class name. I then have an id name of #travel which I assigned to it so that they could share the definition of padding, margin-left and a border.
On the 3rd line of CSS, you'll see that there is another line with just the classID of travel. Even though you saw it above in the previous definition it is repeated here. The reason for this is because there are two attributes that I wanted for JUST THIS paragraph - the font color & the font size.

You'll see from the 1st line of CSS that the the font color for the entire 'tentContainer' was set to GREEN. So in order to overwrite that, we created a new rule for just this one element so that we can change the font color for that paragraph to black. We also set the font size larger on this paragraph. Had we done that in the CSS rule on the first line, then all paragraphs would have a font size of 1.5em - which is not what we wanted to do here.

And finally, you see one last line of CSS code for the li elements and we gave it a font-color of orange. Doing this overwrites the font-color of green that was set by the 'tentContainer' on the first line of our CSS.

So, you can see by grouping elements together, you can give them all the same style and then target multiple items at once. The only thing you need to do is separate each one with a comma. That is correct. You can combine element names, class names and class ids all on 1 line - thereby coding fewer lines of CSS and reducing the size of your CSS file.

DEMO: demo of targeting multiple elements
Okay - now for the demo _ this is what we've just created.
You'll see the h2 and bottom paragraph have a font color of green - but the top paragraph is black and has a different font size. You can also see here that all of the items in the list are orange.
And now notice the 5 images of tents. They all have a black border around them except for the 3rd one because it didn't have a class name assigned to it.
You can see that both paragraphs also have a black border around them. So that's it. We've styled all of these items with just 4 lines of CSS.

Now if you have any questions about targeting multiple elements - leave a comment below. And if all of this DID make sense, please give this video a LIKE - and then SUBSCRIBE if you're interested in learning more CSS.

Go Code & Have Fun!
#webdevelopment
#cssSelectors

Campsite Coders is an educational website that teaches students how to code for web development. Courses include HTML5, CSS and JavaScript. Learn to code at https://www.campsitecoders.com - SUBSCRIBE for more free content.

Social Media Accounts:
Facebook: https://www.facebook.com/campsitecoders/
Instagram: https://www.instagram.com/campsitecoders/
Pinterest: https://www.pinterest.com/campsitecoders/
Twitter: https://twitter.com/campsitecoders/
Linkedin: https://www.linkedin.com/company/campsitecoders