@koryapin

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

Нужно написать 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.
  • Вопрос задан
  • 116 просмотров
Решения вопроса 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
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы