Як вибрати перший, другий або третій елемент із заданою назвою класу?

Як я можу вибрати певний елемент у списку елементів? У мене є таке:

<div class="myclass">my text1</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<div>
    <p>more stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<footer>The end</footer>

У мене є клас CSS, div.myclass {doing things}який застосовується до всіх, очевидно, але я також хотів мати можливість вибрати перший, другий або третій div класу, .myclassяк це, незалежно від того, де вони розмічені :

div.myclass:first {color:#000;} 
div.myclass:second {color:#FFF;} 
div.myclass:third {color:#006;}

Майже як вибір індексу jQuery .eq( index ), який я зараз використовую, але мені потрібна альтернатива без сценарію.

Якщо бути конкретним, я шукаю псевдоселектори, а не такі речі, як додавання іншого класу або використання ідентифікаторів, щоб все працювало.

Ви, напевно, нарешті зрозуміли це між публікацією цього питання та сьогодні, але сама природа селекторів унеможливлює навігацію між ієрархічно не пов'язаними елементами HTML.

Або, простіше кажучи, оскільки ви сказали у своєму коментарі

немає єдиних батьківських контейнерів

... це просто неможливо лише з селекторами, не змінюючи розмітку якимось чином, як показано в інших відповідях.

Ви повинні використовувати .eq()рішення jQuery .

використовувати n-дитина (номер елемента) EX

<div class="parent_class">
    <div class="myclass">my text1</div>
    some other code+containers...

    <div class="myclass">my text2</div>
    some other code+containers...

    <div class="myclass">my text3</div>
    some other code+containers...
</div>
.parent_class:nth-child(1) { };
.parent_class:nth-child(2) { };
.parent_class:nth-child(3) { };

АБО

: n-го типу (номер товару) - це ваш код

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };

Так, ти можеш це зробити. Наприклад, для стилізації тегів td, що складають різні стовпці таблиці, ви можете зробити щось подібне:

table.myClass tr > td:first-child /* First column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td /* Second column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td+td /* Third column */
{
  /* some style here */
}

Це не стільки відповідь, скільки відповідь без відповіді, тобто приклад, який показує, чому одна з високо оцінених відповідей насправді є неправильною.

Я думав, що така відповідь виглядала добре. Насправді це дало мені те, що я шукав: :nth-of-typeщо, для моєї ситуації, спрацювало. (Отже, дякую за це, @Bdwey.)

Спочатку я прочитав коментар @BoltClock (який говорить, що відповідь по суті неправильна) і відхилив його, оскільки я перевірив свій варіант використання, і він спрацював. Тоді я зрозумів, що @BoltClock мав репутацію 300 000+ (!) І має профіль, де він заявляє, що є гуру CSS. Хм, я подумав, може, мені варто трохи придивитися.

Виявляється наступне: div.myclass:nth-of-type(2)НЕ означає "2-й екземпляр div.myclass". Швидше, це означає "2-й екземпляр div, і він також повинен мати клас" myclass ". Це важлива відмінність, коли divміж вашими div.myclassекземплярами є втручаються s .

Мені знадобився якийсь час, щоб розібратися з цим. Таким чином, щоб допомогти іншим зрозуміти це швидше, я написав приклад , який я вважаю демонструє концепцію більш чітко , ніж письмовий опис: я викрав h1, h2, h3і h4елементи , по суті , бути divs. Я поклав Aклас на деякі з них, згрупував їх у 3, а потім пофарбував 1-й, 2-й та 3-й екземпляри в синій, оранжевий та зелений кольори h?.A:nth-of-type(?). (Але, якщо ви уважно читаєте, вам слід запитати "1-й, 2-й і 3-й екземпляри чого?"). Я також вставив несхожий (тобто різний hрівень) або подібний (тобто той самий hрівень) некласифікований елемент в деякі групи.

Зверніть увагу, зокрема, на останню групу з 3. Тут h3між першим та другим h3.Aелементами вставляється некласифікований елемент . У цьому випадку ніякий другий колір (тобто помаранчевий) не відображається, а третій колір (тобто зелений) відображається на другому екземплярі h3.A. Це показує, що nin h3.A:nth-of-type(n)вважає h3s, а не h3.As.

Ну, сподіваюся, це допомагає. І дякую, @BoltClock.

div {
  margin-bottom: 2em;
  border: red solid 1px;
  background-color: lightyellow;
}

h1,
h2,
h3,
h4 {
  font-size: 12pt;
  margin: 5px;
}

h1.A:nth-of-type(1),
h2.A:nth-of-type(1),
h3.A:nth-of-type(1) {
  background-color: cyan;
}

h1.A:nth-of-type(2),
h2.A:nth-of-type(2),
h3.A:nth-of-type(2) {
  background-color: orange;
}

h1.A:nth-of-type(3),
h2.A:nth-of-type(3),
h3.A:nth-of-type(3) {
  background-color: lightgreen;
}

<div>
  <h1 class="A">h1.A #1</h1>
  <h1 class="A">h1.A #2</h1>
  <h1 class="A">h1.A #3</h1>
</div>

<div>
  <h2 class="A">h2.A #1</h2>
  <h4>this intervening element is a different type, i.e. h4 not h2</h4>
  <h2 class="A">h2.A #2</h2>
  <h2 class="A">h2.A #3</h2>
</div>

<div>
  <h3 class="A">h3.A #1</h3>
  <h3>this intervening element is the same type, i.e. h3, but has no class</h3>
  <h3 class="A">h3.A #2</h3>
  <h3 class="A">h3.A #3</h3>
</div>

Можливо, за допомогою селектора "~" CSS?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

.myclass~.myclass~.myclass {
    background: green;
}

Див. Мій приклад на jsfiddle

Використовуйте CSS nth-childіз назвою класу префікса

div.myclass:nth-child(1) {
  color: #000;
}

div.myclass:nth-child(2) {
  color: #FFF;
}

div.myclass:nth-child(3) {
  color: #006;
}

У майбутньому (можливо) ви зможете використовувати :nth-child(an+b of s)

Насправді, підтримка фільтра “of” у браузері дуже обмежена. Здається, лише Safari підтримує синтаксис.

https://css-tricks.com/almanac/selectors/n/nth-child/