CSS выберите конкретное изображение из нескольких изображений

Question

Как выбрать изображение из нескольких изображений?

Например, я получил эти изображения:

<img src="smiley1.gif"> 
 
<img src="smiley2.gif"> 
 
<img src="smiley3.gif"> 
 
<img src="smiley4.gif" alt="Smiley face"> 
 
<img src="smiley5.gif" alt="Smiley face"> 
 
<img src="smiley6.gif" alt="Smiley face">

можно выбрать первый 3 с: а не селектор:

img:not([alt])

Мысли я могу выбрать 2-ую, как это:

img:not([alt]):nth-child(2)

Но это не работает. Как выбрать второй вариант?

Answer 1

Использование :nth-of-type(n)

img:not([alt]):nth-of-type(2) { 
 
background: #ff0000; 
 
}

<img src="smiley1.gif"> 
 
<img src="smiley2.gif"> 
 
<img src="smiley3.gif"> 
 
<img src="smiley4.gif" alt="Smiley face"> 
 
<img src="smiley5.gif" alt="Smiley face"> 
 
<img src="smiley6.gif" alt="Smiley face">

Answer 2

Вы можете пойти адъюнктом селектор родственного, Это в случае, если вы хотите, чтобы выбрать любую вещь, независимо, если это имеет альт или нет.

* alt i put только для того, чтобы проверить селектор, чтобы у меня было что-то, чтобы поместить фон.

HTML:

<img src="smiley1.gif" alt="1"> 
    <img src="smiley2.gif" alt="2"> 
    <img src="smiley3.gif" alt="3"> 
    <img src="smiley4.gif" alt="4"> 
    <img src="smiley5.gif" alt="5"> 
    <img src="smiley6.gif" alt="6"> 

CSS:

img{ 
    background: red; 
} 

img + img { 
    background: yellow; 
} 

img + img + img{ 
     background: green; 
} 

img + img + img + img{ 
    background: pink; 
} 

img + img + img + img + img{ 
    background: blue; 
} 

img + img + img + img + img + img{ 
    background: orange; 
} 

Answer 3

JQuery

$(document).ready(function() { 
    var x = $('img').not('[alt]').eq(1); //selects 2nd element which is does not have "alt" 
    x.css('border-color', 'red'); 
}); 

CSS

img { 
    height: 50px; 
    width: 50px; 
    border: 1px solid black; 
} 

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img src="smiley1.gif"> 
<img src="smiley2.gif"> 
<img src="smiley3.gif"> 
<img src="smiley4.gif" alt="Smiley face"> 
<img src="smiley5.gif" alt="Smiley face"> 
<img src="smiley6.gif" alt="Smiley face"> 

Это работает, даже если изменить порядок элементов.