Сложные CSS selector как написать?

Question

[koryapin]

Нужно написать CSS Selector для каждого элемента.

<div class="one">
          <button class="two"> // 1 button 
          <button class="two"> // 2 button
          <button class="two"> // 3 button
<div class="one">
        <button class="two"> // 4 button
        <button class="two"> // 5 button
        <button class="two"> // 6 button

для первого button вот такой ".two"

А для остальных никак не могу понять как написать CSS. Использовал ":nth-child(1)" и ":nth-of-type(2)" методом тыка, и все равно некоторые элементы не получают CSS.

Comments

[сергей кузьмин]

приведите фрагмент HTML

[koryapin]

[Ankhena]

У вас все кнопки имею класс .two
Так что это:

для первого button вот такой ".two"

неверно.

Посмотрите в справочнике, как используется nth-child и всё встанет на свои места.
Он применяет свойства к нужному дочернему элементу (или элементам) своего родителя.

Пример: https://jsfiddle.net/4ypgnc3e/

[Ankhena]

И примите правку вопроса, чтобы разметка была видна всем

[koryapin]

Ankhena, nth-child не могу разобраться.
Вот с xpath просто

"//*[@class="two"]"
"(//*[@class="two"])[2]"
"(//*[@class="two"])[3]"
"(//*[@class="two"])[4]"
"(//*[@class="two"])[5]"
"(//*[@class="two"])[6]"

Как прописать так же в CSS?

[koryapin]

Как видно в названии класса в кнопке несколько классов, я хочу использовать только первый, так как остальные могут меняться, а мне не хочется плодить локаторы под каждый элемент. Потому хочу использовать CSS. Если кто знает как использовать XPATH для первой части названия класса, скажите.

[Ankhena]

koryapin, пример в моем первом сообщении.
Если непонятен синтаксис SCSS можете воспользоваться компилятором в CSS https://cssportal.com/scss-to-css/

[archelon]

если nth-child не работает, попробуйте nth-of-type

[koryapin]

archelon, я использую nth-child и nth-of-type но не все элементы могу найти

[koryapin]

Еще пример и вопрос: как написать CSS для элемента под номером 1 используя первую часть класса "context-menu-item"?

[Артем Золин]

При чем тут теги JAVA и SELENIUM?

Answer 1

[koryapin]

Привет.
Я так и не получил ответа на свой вопрос. Но решение нашел.

Изначально нужно было написать селектор для класса с несколькими названиями в одном (class="one two 1 2"). Часть такого класса, как правило, меняется. Но первая часть класса, тоже как правило, неизменна.

Через CSS можно прописать селектор как ".one" и он будет находить все классы, в названии которых есть "one". Но проблема в том если таких классов много и они находятся в разных частях кода, обратиться к через CSS невозможно. Всякие ":nth-child(1)" и ":nth-of-type(2)" не помогут, обязательно найдется к элемент, которого ты не найдешь.

У Xpath есть крутая штука как "*" ставишь ее и ищешь элементы по всему сайту, но в этом случае нужно 100% совпадение в названии класса.

И вот решение:
У Xpath можно создавать селекторы по части названия класса.

итак, код (пример)

<div class="one">
          <button class="two true"> // 1 button 
          <button class="two falsh"> // 2 button
          <button class="two falsh"> // 3 button
<div class="one">
        <button class="two falsh"> // 4 button
        <button class="two true"> // 5 button
        <button class="two true"> // 6 button

Селекторы для каждой кнопки (button) по первой части названия класса:
xpath = "(.//*[starts-with(@class, 'two ')])[1]" // 1 button
xpath = "(.//*[starts-with(@class, 'two ')])[2]" // 2 button
xpath = "(.//*[starts-with(@class, 'two ')])[3]" // 3 button
xpath = "(.//*[starts-with(@class, 'two ')])[4]" // 4 button
xpath = "(.//*[starts-with(@class, 'two ')])[5]" // 5 button
xpath = "(.//*[starts-with(@class, 'two ')])[6]" // 6 button