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

I have this html :

<div class="image">

   <img src=... />

   <img src= .../>

</div>

And I would to apply css only to the first image of div of class image without having to add a class to my first img (in that case, I would do .image .img1 but is there another way ?

Thanks a lot for your help

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

add a comment |

I have this html :

<div class="image">

   <img src=... />

   <img src= .../>

</div>

And I would to apply css only to the first image of div of class image without having to add a class to my first img (in that case, I would do .image .img1 but is there another way ?

Thanks a lot for your help

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

add a comment |

I have this html :

<div class="image">

   <img src=... />

   <img src= .../>

</div>

And I would to apply css only to the first image of div of class image without having to add a class to my first img (in that case, I would do .image .img1 but is there another way ?

Thanks a lot for your help

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

I have this html :

<div class="image">

   <img src=... />

   <img src= .../>

</div>

And I would to apply css only to the first image of div of class image without having to add a class to my first img (in that case, I would do .image .img1 but is there another way ?

Thanks a lot for your help

css css3 css-selectors

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

asked Mar 22 '13 at 14:44

Reveclair

1,36442951

add a comment |

5 Answers
5

active

oldest

votes

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.

edited Dec 10 '13 at 18:27

answered Mar 22 '13 at 14:50

Michael

5,79011937

1

In what way is :first-of-type better than :first-child if all the children are going to be img elements?

– BoltClock♦
Mar 22 '13 at 18:08

2

Edited my answer. In any case, first-of-type would be a better solution overall as it is more specific to the img tag only. If at any point this HTML is modified to include, for example a heading before the images (which wouldn't be an unreasonable idea), :first-child would break, and the solution would be to use :first-of-type to fix. Why not just cut to the chase and use :first-of-type in the first place? No reason that I can see not to.

– Michael
Mar 22 '13 at 18:14

3

"limited support when using IE" would count as one. Also, Modernizr does not polyfill selector support - you do that with Selectivizr instead.

– BoltClock♦
Mar 22 '13 at 18:30

add a comment |

You can do it using first-child selector

.image img:first-child

{

  height:500px;

  width:200px;

  border:15px solid Red;    

}

JS Fiddle Example

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

add a comment |

The ':first-child' selector seems like it might be what you need.

http://www.w3schools.com/cssref/sel_firstchild.asp

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

add a comment |

article>img:first-child {

   border:1px solid #f00;

}

<article class="image">

   <img src=... />

   <img src= .../>

   <div class="image">

      <img src=... />

      <img src= .../>

      <img src= .../>

            

   </div>

   <img src= .../>

      <img src= .../>

</div>

edited Jan 1 at 2:56

answered Jan 1 at 2:45

Ramakrishnan R

213

add a comment |

If you want the first image inside a DIV (and there might be other elements preceding it) you need first-of-type rather than first-child

div > img:first-of-type {}

consider the following html

<div>

    <p>paragraph, this is :first-child</p>

    <img src="..."><!-- this is img:first-of-type -->

</div>

More details can be found at https://developer.mozilla.org/en-US/docs/CSS/:first-of-type

edited Mar 22 '13 at 15:06

answered Mar 22 '13 at 14:59

xec

12.9k33247

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15573159%2fhow-to-select-first-img-tag-in-a-div-with-many-img-tag%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

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.

edited Dec 10 '13 at 18:27

answered Mar 22 '13 at 14:50

Michael

5,79011937

1

In what way is :first-of-type better than :first-child if all the children are going to be img elements?

– BoltClock♦
Mar 22 '13 at 18:08

2

Edited my answer. In any case, first-of-type would be a better solution overall as it is more specific to the img tag only. If at any point this HTML is modified to include, for example a heading before the images (which wouldn't be an unreasonable idea), :first-child would break, and the solution would be to use :first-of-type to fix. Why not just cut to the chase and use :first-of-type in the first place? No reason that I can see not to.

– Michael
Mar 22 '13 at 18:14

3

"limited support when using IE" would count as one. Also, Modernizr does not polyfill selector support - you do that with Selectivizr instead.

– BoltClock♦
Mar 22 '13 at 18:30

add a comment |

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.

edited Dec 10 '13 at 18:27

answered Mar 22 '13 at 14:50

Michael

5,79011937

1

In what way is :first-of-type better than :first-child if all the children are going to be img elements?

– BoltClock♦
Mar 22 '13 at 18:08

2

Edited my answer. In any case, first-of-type would be a better solution overall as it is more specific to the img tag only. If at any point this HTML is modified to include, for example a heading before the images (which wouldn't be an unreasonable idea), :first-child would break, and the solution would be to use :first-of-type to fix. Why not just cut to the chase and use :first-of-type in the first place? No reason that I can see not to.

– Michael
Mar 22 '13 at 18:14

3

"limited support when using IE" would count as one. Also, Modernizr does not polyfill selector support - you do that with Selectivizr instead.

– BoltClock♦
Mar 22 '13 at 18:30

add a comment |

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.

edited Dec 10 '13 at 18:27

answered Mar 22 '13 at 14:50

Michael

5,79011937

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.

edited Dec 10 '13 at 18:27

answered Mar 22 '13 at 14:50

Michael

5,79011937

edited Dec 10 '13 at 18:27

answered Mar 22 '13 at 14:50

Michael

5,79011937

answered Mar 22 '13 at 14:50

Michael

5,79011937

answered Mar 22 '13 at 14:50

Michael

5,79011937

1

In what way is :first-of-type better than :first-child if all the children are going to be img elements?

– BoltClock♦
Mar 22 '13 at 18:08

2

Edited my answer. In any case, first-of-type would be a better solution overall as it is more specific to the img tag only. If at any point this HTML is modified to include, for example a heading before the images (which wouldn't be an unreasonable idea), :first-child would break, and the solution would be to use :first-of-type to fix. Why not just cut to the chase and use :first-of-type in the first place? No reason that I can see not to.

– Michael
Mar 22 '13 at 18:14

3

"limited support when using IE" would count as one. Also, Modernizr does not polyfill selector support - you do that with Selectivizr instead.

– BoltClock♦
Mar 22 '13 at 18:30

add a comment |

1

In what way is :first-of-type better than :first-child if all the children are going to be img elements?

– BoltClock♦
Mar 22 '13 at 18:08

2

Edited my answer. In any case, first-of-type would be a better solution overall as it is more specific to the img tag only. If at any point this HTML is modified to include, for example a heading before the images (which wouldn't be an unreasonable idea), :first-child would break, and the solution would be to use :first-of-type to fix. Why not just cut to the chase and use :first-of-type in the first place? No reason that I can see not to.

– Michael
Mar 22 '13 at 18:14

3

"limited support when using IE" would count as one. Also, Modernizr does not polyfill selector support - you do that with Selectivizr instead.

– BoltClock♦
Mar 22 '13 at 18:30

In what way is :first-of-type better than :first-child if all the children are going to be img elements?

– BoltClock♦
Mar 22 '13 at 18:08

Edited my answer. In any case, first-of-type would be a better solution overall as it is more specific to the img tag only. If at any point this HTML is modified to include, for example a heading before the images (which wouldn't be an unreasonable idea), :first-child would break, and the solution would be to use :first-of-type to fix. Why not just cut to the chase and use :first-of-type in the first place? No reason that I can see not to.

– Michael
Mar 22 '13 at 18:14

"limited support when using IE" would count as one. Also, Modernizr does not polyfill selector support - you do that with Selectivizr instead.

– BoltClock♦
Mar 22 '13 at 18:30

add a comment |

You can do it using first-child selector

.image img:first-child

{

  height:500px;

  width:200px;

  border:15px solid Red;    

}

JS Fiddle Example

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

add a comment |

You can do it using first-child selector

.image img:first-child

{

  height:500px;

  width:200px;

  border:15px solid Red;    

}

JS Fiddle Example

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

add a comment |

You can do it using first-child selector

.image img:first-child

{

  height:500px;

  width:200px;

  border:15px solid Red;    

}

JS Fiddle Example

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

You can do it using first-child selector

.image img:first-child

{

  height:500px;

  width:200px;

  border:15px solid Red;    

}

JS Fiddle Example

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

answered Mar 22 '13 at 14:46

Sachin

32.7k67488

add a comment |

The ':first-child' selector seems like it might be what you need.

http://www.w3schools.com/cssref/sel_firstchild.asp

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

add a comment |

The ':first-child' selector seems like it might be what you need.

http://www.w3schools.com/cssref/sel_firstchild.asp

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

add a comment |

The ':first-child' selector seems like it might be what you need.

http://www.w3schools.com/cssref/sel_firstchild.asp

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

The ':first-child' selector seems like it might be what you need.

http://www.w3schools.com/cssref/sel_firstchild.asp

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

answered Mar 22 '13 at 14:46

Scott Stroz

7,00111624

add a comment |

article>img:first-child {

   border:1px solid #f00;

}

<article class="image">

   <img src=... />

   <img src= .../>

   <div class="image">

      <img src=... />

      <img src= .../>

      <img src= .../>

            

   </div>

   <img src= .../>

      <img src= .../>

</div>

edited Jan 1 at 2:56

answered Jan 1 at 2:45

Ramakrishnan R

213

add a comment |

article>img:first-child {

   border:1px solid #f00;

}

<article class="image">

   <img src=... />

   <img src= .../>

   <div class="image">

      <img src=... />

      <img src= .../>

      <img src= .../>

            

   </div>

   <img src= .../>

      <img src= .../>

</div>

edited Jan 1 at 2:56

answered Jan 1 at 2:45

Ramakrishnan R

213

add a comment |

article>img:first-child {

   border:1px solid #f00;

}

<article class="image">

   <img src=... />

   <img src= .../>

   <div class="image">

      <img src=... />

      <img src= .../>

      <img src= .../>

            

   </div>

   <img src= .../>

      <img src= .../>

</div>

edited Jan 1 at 2:56

answered Jan 1 at 2:45

Ramakrishnan R

213

article>img:first-child {

   border:1px solid #f00;

}

<article class="image">

   <img src=... />

   <img src= .../>

   <div class="image">

      <img src=... />

      <img src= .../>

      <img src= .../>

            

   </div>

   <img src= .../>

      <img src= .../>

</div>

article>img:first-child {

   border:1px solid #f00;

}

<article class="image">

   <img src=... />

   <img src= .../>

   <div class="image">

      <img src=... />

      <img src= .../>

      <img src= .../>

            

   </div>

   <img src= .../>

      <img src= .../>

</div>

article>img:first-child {

   border:1px solid #f00;

}

<article class="image">

   <img src=... />

   <img src= .../>

   <div class="image">

      <img src=... />

      <img src= .../>

      <img src= .../>

            

   </div>

   <img src= .../>

      <img src= .../>

</div>

edited Jan 1 at 2:56

answered Jan 1 at 2:45

Ramakrishnan R

213

edited Jan 1 at 2:56

answered Jan 1 at 2:45

Ramakrishnan R

213

answered Jan 1 at 2:45

Ramakrishnan R

213

answered Jan 1 at 2:45

Ramakrishnan R

213

add a comment |

If you want the first image inside a DIV (and there might be other elements preceding it) you need first-of-type rather than first-child

div > img:first-of-type {}

consider the following html

<div>

    <p>paragraph, this is :first-child</p>

    <img src="..."><!-- this is img:first-of-type -->

</div>

More details can be found at https://developer.mozilla.org/en-US/docs/CSS/:first-of-type

edited Mar 22 '13 at 15:06

answered Mar 22 '13 at 14:59

xec

12.9k33247

add a comment |

If you want the first image inside a DIV (and there might be other elements preceding it) you need first-of-type rather than first-child

div > img:first-of-type {}

consider the following html

<div>

    <p>paragraph, this is :first-child</p>

    <img src="..."><!-- this is img:first-of-type -->

</div>

More details can be found at https://developer.mozilla.org/en-US/docs/CSS/:first-of-type

edited Mar 22 '13 at 15:06

answered Mar 22 '13 at 14:59

xec

12.9k33247

add a comment |

If you want the first image inside a DIV (and there might be other elements preceding it) you need first-of-type rather than first-child

div > img:first-of-type {}

consider the following html

<div>

    <p>paragraph, this is :first-child</p>

    <img src="..."><!-- this is img:first-of-type -->

</div>

More details can be found at https://developer.mozilla.org/en-US/docs/CSS/:first-of-type

edited Mar 22 '13 at 15:06

answered Mar 22 '13 at 14:59

xec

12.9k33247

If you want the first image inside a DIV (and there might be other elements preceding it) you need first-of-type rather than first-child

div > img:first-of-type {}

consider the following html

<div>

    <p>paragraph, this is :first-child</p>

    <img src="..."><!-- this is img:first-of-type -->

</div>

More details can be found at https://developer.mozilla.org/en-US/docs/CSS/:first-of-type

edited Mar 22 '13 at 15:06

answered Mar 22 '13 at 14:59

xec

12.9k33247

edited Mar 22 '13 at 15:06

answered Mar 22 '13 at 14:59

xec

12.9k33247

answered Mar 22 '13 at 14:59

xec

12.9k33247

answered Mar 22 '13 at 14:59

xec

12.9k33247

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk