Help me find my mistake

I tried selecting multiple classes of different elements. Please tell is this method wrong. The link is below

The style is being applied to only first image.

When we select class in css we firstly need to prefix class name with a period or dot so during select multiple classes at once we also need to prefix with a dot after comma character.

.image1 ,  "**here is your problem**"  image2 ,  "**here is your problem**"  image3 {
    /*css code*/
}

Hello there,

This is how I generally use CSS selectors:

  • If there is one element that needs unique styling: Give the element an id, and use #theId to style it.
  • If there are two or more elements that share the same styling: Give the elements the same class, and use .theClass to style them.
  • If the elements are all of the same type of HTML element (eg. div, imgā€¦): Use the elementName (eg div) to style them.

So, your problem is as @priyanshushrama709 says: You are not using the correct selector for your CSS.
This selects an element with a class="image1": .image1 { }
This selects an element with an element name <image2></image2>: image2 { } (which does not exist)

For future posts, please do not paste screenshots of code. This is not easy for others to work with, and you are less likely to get help.

Hope this helps

1 Like

Hi @Sky020 ,

Iā€™m not getting this point. Unable to understand. Will you please explain this point?

For example, say you have this piece of code:

<img src="fake_source" alt="I am image 1">
<img src="fake_source2" alt="I am image 2">
<img src="fake_source3" alt="I am image 3">

If it were me styling them, because they are the same element type (img), I would select them like this:

img {
  width: 100%;
  height: 100%;
}

Now, if there was an img element I did not want styled like that, I would have 2 options:

  1. Overide the img styles above, by giving my image an id="image_i_do_not_want_styled", and styling it the specific way I want.
  • Example: You have a website that displays images, but you use img to give your site a logo, but do not want the logo to be the same style as the main images.
  1. Not use the img selector, but give each image the same class="images_I_want_styled", and use that as a selector.

Hope this clarifies.

1 Like

Thank you. Very well explained. :smiling_face_with_three_hearts:

Thank you everybody for the replies. It helped me. :pray: