CODEWITHSUNDEEP
css
Grant
Grant

Reputation: 6329

First, second and third element individually with only CSS

I'm looking for a way to target only 1, only 2 and only 3 of a given element - I know there are better ways, but this is more of a challenge to see if it's possible to easily target selectors at such a vague accuracy with only CSS.

<div class="members-of">
    <h4 class="widget-title">Members of</h4>
    <ul>
        <li>
            <img src="image0.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image1.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image3.png" alt="">
        </li>
    </ul>
    <div class="clear"></div>
</div>

How would you tackle it with highest efficiency if all you could use was CSS?

/* Member 1 */
.members-of ul img:first-child {}
/* Member 2 */
.members-of ul img:nth-of-type... {}
/* Member 3 */
.members-of ul img:eq(@_o) {}

Upvotes: 0

Views: 906

Answers (3)

NIKHIL CHANDRA ROY
NIKHIL CHANDRA ROY

Reputation: 1087

You can use nth-of-type, nth-child, :first-of-type, :last-of-type css selector.

**.members-of ul img:eq(@_o) {} ** // eq is not valid selector here,

eq for jQuery selector.

see below 


img{
  width: 50px;
  height: 50px;
  display: block;
}
.members-of ul:first-of-type li img{
  border: solid red;
}
.members-of ul:nth-of-type(2) li img{
  border: solid green;
}
.members-of ul:last-of-type li img{
  border: solid orange;
}

or you can use with nth-child but you have to count also h4 tag for this.

img{
  width: 50px;
  height: 50px;
  display: block;
}
.members-of ul:nth-child(2) li img{
  border: solid red;
}
.members-of ul:nth-child(3) li img{
  border: solid green;
}
.members-of ul:nth-child(4) li img{
  border: solid orange;
}

see here complete idea about css selectors

w3schools.com CSS Selectors

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You may use :nth-of-type (or :nth-child) applied to the lists. In your specific example both the pseudoclasses will work.

.members-of ul:nth-of-type(1) img {
  /* 1st image */
  border: 1px red solid;
}
.members-of ul:nth-of-type(2) img {
  /* 2nd image */
  border: 1px blue solid;
}
.members-of ul:nth-of-type(3) img {
  /* 3rd image */
  border: 1px yellowgreen solid;
}
<div class="members-of">
    <h4 class="widget-title">Members of</h4>
    <ul>
        <li>
            <img src="image0.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image1.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image3.png" alt="">
        </li>
    </ul>
    <div class="clear"></div>
</div>

Upvotes: 1

Sagi Rika
Sagi Rika

Reputation: 2979

Have a look at this selector:

/* First 3 span elements */
.members-of ul span:nth-of-type(-n+3) {
   width: 25px;
   height: 25px;
   background: red;
}
<div class="members-of">
    <h4 class="widget-title">Members of</h4>
    <ul>
        <li>
            <span>span 1</span>
        </li>
    </ul>
    <ul>
        <li>
            <span>span 2</span>
        </li>
    </ul>
    <ul>
        <li>
            <span>span 3</span>
        </li>
    </ul>
    <div class="clear"></div>
</div>

Upvotes: 0

Related Questions