How do I differentiate between two different images in the same class in my CSS file


Tags: html,css

Problem :

I am attempting to add two images on either side of my header. The issue is that I use the img selector for the image that's already to the left of my text and that specifies the positioning. I need another CSS selector for the other image to make a new position for the new image. How can I go about renaming it in my index.html file so that I can so this? Here is a snippet of the HTML code:

<div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
             <h1>Feed.me</h1>
          <img src="img/hat.png"></img>
          <img src="img/ware.png"></img>

And this is what it looks like in the CSS file:

img {
position: absolute;
top: 5px;
left: 595px;
z-index: -1;

}

Any ideas? Please let me know if you need more information. Thanks in advance!



Solution :

Just use ids

i.e.

<div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
             <h1>Feed.me</h1>
          <img src="img/hat.png" id="image1"></img>
          <img src="img/ware.png" id="image2"></img>

Then

   #image1 {
     ...

   }
   #image2 {
     ...

   }
   img {
      .... common stuff
   }

    CSS Howto..

    How to detect if my search bar has been expanded?

    How to create multiple spoiler buttons

    How to get divs 100% of browser using css?

    How to append text after last css class

    CSS - How to make overflow hidden on the right but not the left? [duplicate]

    jQuery hide show id

    How to create dynamic business listings in wordpress [closed]

    How to center data table header and data using in bootstrap w/o using CSS?

    How I write a:hover::before in less file?

    How to override xhtml theme css?

    How to control size of list-style-type disc in CSS?

    how to put image on button? (css)

    css 3d animation, how?

    How to align an image of any size from the centre, rather than the top/bottom/sides, using css

    How can I add fixed background just to this section? [demo included]

    How to right align last two columns of a table with CSS

    How to add physics to CSS animations?

    Need to compress CSS and JavaScript via PHP but need to know performance implications and how to implement?

    How to access the set qt stylesheet properties (css like grammar), or is there an css to xml converter?

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    How can I format my css text so that the result is in 2 columns?

    How can I prevent this plugin from popping up from behind the content area?

    GWT- SingleSelectionModel celltable- how to change selected cell's CSS?

    How to add another text decoration definition with Javascript?

    How to extract icon from picture and display it in page? (by javascript or jquery or css)

    css/html, how to scale and center a logo image

    CSS - How to change backgound colour for item avatar in ionicframework?

    How do I evenly distribute a group of spans across a div?

    How to Control Width of Title (H2) with CSS?

    How to position a vertical menu as nested
      under horizontal parent