Question 45710 in CSS Question posted in
Some basic documentation can be found here.

CSS Don't select the first element inside a div with mixed content

I have mixed content inside each

box, what I need is to select all the images except the first one it finds. I have tried in different ways but I can’t get it, can you help me? below I leave the code

<style>
  img{ width:50px; height:50px; }
  
  /* apply border to all but first image  */
  /*p:not(p:first-of-type) > img{
    border:2px solid red 
  }*/
   
  /*p > :not(:first-of-type > img) {
    border:2px solid red 
  }*/
  /*p:not(p > img:nth-of-type(1)){
    border:1px solid red 
  }*/
  /*img:not(:nth-of-type(1)) {
    border:1px solid red;
  }*/
  /* *:not(img:first-of-type){
    border: 1px solid red;
  }*/
  /* *:not(img:first-of-type) > img {
    border: 1px solid red;
  }*/
  /* :not(*:first-of-type) img{
    border: 1px solid red;
  }*/ 
  *:not(:first-of-type > img) > img {
    border: 1px solid red;
  }
</style>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>

DEMO: https://jsbin.com/vawumehime/1/edit?html,output

Tags:

2

Answers


  1. 0

    You can use the :nth-child() selector to select all but the first two <p> tags:

    img{ width:50px; height:50px; }

p:nth-child(n+3) > img {
  border:2px solid red 
}
    <p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
    Login or Signup to reply.
  2. 0

    Firefox supports the CSS :has selector only if the user has set a flag.

    Other major browsers support it by default and so this will work:

    *:has(> img) ~ * img

    <style>
  img {
    width: 50px;
    height: 50px;
  }
  
  *:has(> img)~* img {
    border: solid 1px red;
  }
</style>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>
<p>hello</p>
<p><img src="https://static.jsbin.com/images/dave.min.svg"></p>

    That is, select every img that is in an element that is somewhere preceded by (is a sibling of) an element that contains an img element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search