Help me find my mistake

1

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

15946410858135763865999692599861
159464108581357638659996925998612304Ɨ1728 1.28 MB

15946411868686513820112099574955
159464118686865138201120995749551728Ɨ2304 1.17 MB

15946412549347144035638029481421
159464125493471440356380294814212304Ɨ1728 926 KB

The style is being applied to only first image.

2

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*/
}
3

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
4

Hi @Sky020 ,

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

5

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
6

Thank you. Very well explained. :smiling_face_with_three_hearts:

7

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