Первый, второй и третий элемент индивидуально только с CSS

Question

Я ищу способ нацелить только на 1, только 2 и только 3 данного элемента - я знаю, что есть лучшие способы, но это более сложная задача, чтобы увидеть, возможно ли легко нацелить селекторы на такие Неопределенная точность только с 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>

Как бы вы справились с ней с максимальной эффективностью, если бы все, что вы могли использовать, было 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) {}

Answer 1

Вы можете использовать :nth-of-type (или :nth-child), примененные к спискам. В вашем конкретном примере c оба псевдокласса будут работать.

.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>

Answer 2

Вы можете использовать селектор nth-of-type, nth-child,: first-of-type,: last-of-type css.

**. Members-of ul img: eq (@_o) {} ** // здесь недопустимый селектор,

экв для селектора jQuery.

см. ниже

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;
}

или вы можете используйте с nth-child, но для этого нужно учитывать также тег h4.

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;
}

см. здесь полное представление о css селекторах

w3schools.com CSS селекторах

Answer 3

Посмотрите на этот селектор:

/* 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>