How to Select First Img Tag in a Div with Many Img Tag

How to select first img tag in a div with many img tag?

You can use the :first-child selector to do this.

You could also use :nth-child(1) (where the 1 is = to the first child, 2 is equal to the second child etc.)

Finally, a more proper way would be the use of :first-of-type

For example:

div.image img:first-child {}

Or:

div.image img:nth-child(1) {}

Or (if there are other elements, say an <h1> that comes prior to any images:

div img:first-of-type

If you have the potential for having a div with class image which has images inside it and also another div which has images in it, like this:

HTML:

<div class="image">
   <img src=... />
   <img src= .../>
   <div class="image">
      <img src=... />
      <img src= .../>
   </div>
</div>

Then use these selectors:

For example:

div.image > img:first-child {}

Or:

div.image > img:nth-child(1) {}

Or:

div > img:first-of-type

Documentation on :first-child and on :nth-child() and on :first-of-type and on child combinator.

Note that :nth-child() and :first-of-type are CSS3 selectors, which carry some limited support when using IE. See Can I use CSS3 Selectors for browser support details.

Consider something like Selectivizr to help standardize IE.

How to target the first img in multiple divs

You can relay on jQuery to make this easy to handle: .has() function

once parent are found add them a class .addClass()

Create that class in your style sheet.

Now you might have sibblings with similar class.

You can reset to whatever you want every sibblings coming next the first one with the ~ selector

$(".blog > div").has(".image").addClass(" seenAtFirst");

/* set regular and reset next similar targets */.blog>div,.seenAtFirst ~ .seenAtFirst  {  border:none;  background:turquoise;  color:black;  text-align:initial;/* initial can also be used to reset style */}/* set my first target*/div.seenAtFirst {  border:solid green;  color:white;  background:tomato;  text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="blog">  <div>    <h3>title</h3>  </div>  <div>    <div class="no-image">      <a>        <img>no-img      </a>    </div>  </div>  <div>    <div class="image">      <a>        <img>Target me and reset also next ones if any.      </a>    </div>  </div>  <div>    <div class="image">      <a>        <img>img      </a>    </div>  </div>  <div>    <div class="image">      <a>        <img>img      </a>    </div>  </div>  <div>    <div class="image">      <a>        <img>img      </a>    </div>  </div></div>

CSS selector select all img tags inside a div irrespective of child level

try this

.my_div img
{
   max-width:100%;
}

if this doesn't applies then use !important like this

.my_div img
{
   max-width:100% !important;
}

How to target a specific img element of a div in CSS?

You can add a class to the images OR

.foo img:nth-child(2) { css here }

or

.foo img:first-child { css here }
.foo img:last-child { css here }

Select a specific img tag in li tag

Your CSS selector selects all img-tags, that are directly a child of an a-tag inside your #menu-item-4.

try this:

    #menu-item-4 > a img
   { background-position: -161px 0px!important; width: 22px; height: 22px;} 

Its probably better to add classes to a-tags or the img-tags

How would I select the first image in this div with jquery?

Like this?

$('.m-carousel-inner').find('img:first');

Fiddle

See :first

First part $('.m-carousel-inner') is the selector for your container element with class .m-carousel-inner which will return the jquery wrapped DOM element, and apply .find('img:first') to find the first instance of img as its child at any level.

---

Related Topics