CODEWITHSUNDEEP
cssnav
Coding Duchess
Coding Duchess

Reputation: 6909

How to add css class to an element inside nav element

I have a <nav> element on my page that contains couple of <div> elements and one of the divs contains a number of images. I want to add a border to the images so I have added a class to the css file:

.img-cls
{
     border: solid blue 1px;
}

Now if I add class="img-cls" to any image on the page, it adds a border, but if I add the same to any image inside <nav>, nothing changes. Can anyone help me fix the issue?

Below is my html:

<form id="form1" runat="server" method="post">
    <nav class="navbar navbar-default navbar-fixed-top"
         role="navigation">

        <div id="divContainer" class="container">
            <div class="navbar-header">

            </div>
            <div id="navbarContent" class="collapse navbar-collapse">

            </div>

            <div>
                <div class="input-group">
                    <span class="input-group-addon">ID</span>
                    <input type="text" id="txtID" class="form-control"
                           placeholder="Enter your id here" />
                </div>
                <br />
                <button type="submit" class="btn btn-primary btn-lg btn-block">
                    Submit Data
                </button>
                <br />
                    <img src="images/DOS.png" class="img-cls"/>
                    <img src="images/SR.png" class="img-cls"  />
                    <img src="images/RFI.jpg" class="img-cls"  />
            </div>


        </div>
    </nav>

</form>

Upvotes: 1

Views: 2475

Answers (3)

Rolly
Rolly

Reputation: 3375

try this, all your child images will have the border

    <style>
      .bordered_images img
      {
           border: solid blue 1px;
      }

      nav .border{
        border: solid red 5px; 
      }
      nav .bigborder{
        border: solid purple 10px; 
      }
    </style>


          <div class="bordered_images">
            <img class="" src="http://lorempixel.com/150/100" alt="">
            <img class="" src="http://lorempixel.com/150/100" alt="">
            <div class="anotherdiv">
              <img class="" src="http://lorempixel.com/150/100" alt="">

              <div class="onemore">
                <img class="" src="http://lorempixel.com/150/100" alt="">
              </div>
            </div>
          </div>


    <nav>
      <img src="http://lorempixel.com/150/100" alt="" class="border">
      <img src="http://lorempixel.com/150/100" alt="" class="">
      <div>
        <img src="http://lorempixel.com/150/100" alt="" class="bigborder">
        <img src="http://lorempixel.com/150/100" alt="" class="">
      </div>
    </nav>



  <style>
      .img-cls {
        border: solid red 5px; 

      }

  </style>

  <h1>THE FORM</h1>
  <form id="form1" runat="server" method="post">
      <nav class="navbar navbar-default navbar-fixed-top"
           role="navigation">

          <div id="divContainer" class="container">
              <div class="navbar-header">

              </div>
              <div id="navbarContent" class="collapse navbar-collapse">

              </div>

              <div>
                  <div class="input-group">
                      <span class="input-group-addon">ID</span>
                      <input type="text" id="txtID" class="form-control"
                             placeholder="Enter your id here" />
                  </div>
                  <br />
                  <button type="submit" class="btn btn-primary btn-lg btn-block">
                      Submit Data
                  </button>
                  <br />
                      <img src="http://lorempixel.com/150/100" class="img-cls"/>
                      <img src="http://lorempixel.com/150/100" class="img-cls"  />
                      <img src="http://lorempixel.com/150/100" class="img-cls"  />
              </div>


          </div>
      </nav>

  </form>

Let me know if you solve your problem.

Here the example Example

Upvotes: 1

Andriy Ivaneyko
Andriy Ivaneyko

Reputation: 22021

The problem definitely in css priority. Try to access your images with next selector (which has more priority than mentioned above.)

nav div img.img-cls, nav img.img-cls
{
     border: solid blue 1px;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67768

There's probably another rule for images inside nav that prevents the border. But you can add !important to your rule:

.img-cls
{
     border: solid blue 1px !important;
}

This should override the other rule (unless it also has !important in it)

ADDITION/EDIT:

You can also set up a rule for images inside your <nav>element:

nav img { border: solid blue 1px };

Upvotes: 1

Related Questions