Есть ли такая вещь, как селектор CSS "all inclusive sibling"?

Мой HTML:

<p>Doggies</p>
<p class="green_guys">Froggies</p>
<p>Cupcakes</p>
<p>Piggies</p>

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

Другие селектора:

Селектор + (соседний селектор селектора a.k.a.) будет выбирать только кексы:

.green_guys + p {
    /* selects the <p> element that immediately follows .green_guys */
}

Селектор ~ (общий селектор селектора a.k.a.) будет выбирать только кексы и свиньи:

.green_guys ~ p {
    /* selects all <p> elements that follow .green_guys */
}

Ответ 1

Не существует синонимов-комбинаторов, которые смотрят назад или вокруг, только смежные и общие смежные компоненты, которые ждут вперед.

Лучшее, что вы можете сделать, это определить способ ограничить выбор только этими элементами p с одним и тем же родителем, а затем выбрать p детей, которые :not(.green_guys). Если у родительского элемента есть идентификатор #parent, например, вы можете использовать этот селектор:

#parent > p:not(.green_guys) {
    /* selects all <p> children of #parent that are not .green_guys */
}

Однако приведенное выше будет по-прежнему соответствовать вашим элементам p, даже если ни один из них не имеет класса. В настоящее время невозможно выбрать братьев и сестер элемента только при условии существования указанного элемента (который является целью комбинатора-брата) - установить связь между двумя элементами-братьями).

Селекторы 4 :has(), мы надеемся, исправим это без необходимости использования комбинатора предыдущего соседа, что приведет к следующему решению:

p:has(~ .green_guys), .green_guys ~ p {
    /* selects all <p> elements that are siblings of .green_guys */
}

Это не будет соответствовать никому, если ни один из дочерних элементов родительского элемента не имеет класса.

Ответ 2

Не то, что я знаю. Селектор siblings не существует.

Это может сработать, но:

#parent_of_green_guys > p:not(.green_guys) {
  foo: bar;
}

Или, если вы не ищете p с атрибутами class:

#parent_of_green_guys > p:not([class]) {
  foo: bar;
}

Ответ 3

Мой сценарий был немного другим, но я хотел выбрать братьев и сестер элемента ввода, чтобы отображать его, пока он был активным, а другой, если он остался недействительным.

Мой html был таким, и мне не удалось выбрать недопустимый текст.

<input name="importantAnswer">
<div class="help-text"></div>
<div class="invalid-text"></div>

Мне удалось обойти это, вставив братьев и сестер в соседний и используя дочерние селектора на этом.

<input name="importantAnswer">
<div class="messages">
   <div class="help-text"></div>
   <div class="invalid-text"></div>
</div>


.help-text, .invalid-text {
   visibility:hidden;
}

.input:active +.messages > .help-text {
   visibility:visible;
}

.input.invalid:visited +.messages > .invalid-text {
   visibility:visible;
}

И это сработало.

Ответ 4

Я действительно нашел 3 способа сделать это:

Решение 1

.parent > p:not(.green_guys) {
  text-decoration: line-through; /* or whatever you like */
}

Демонстрация: https://jsbin.com/cafipun/edit?html,css,output

ПРОФИ: быстро и просто.

Минусы: вам нужно знать родительский селектор (чтобы не было сверхпортативного решения).

Решение 2

p ~ p:not(.green_guys),
p:first-child:not(.green_guys) {
  text-decoration: line-through; /* or whatever you like */
}

Демонстрация: https://jsbin.com/seripuditu/edit?html,css,output

ПРОФИ: нет необходимости знать родительский селектор (это может быть очень полезно для использования в общих случаях).

Минусы: это может быть слишком общим (будьте осторожны, например, если у вас есть другие p в вашем HTML!).

Решение 3

Небольшой вариант решения 2 (чтобы не было против). В этом случае вы указываете селектор брата, чтобы получить более конкретный контекст.

p.siblings ~ p:not(.green_guys),
p.siblings:first-child:not(.green_guys) {
  text-decoration: line-through; /* or whatever you like */
}

Демонстрация: https://jsbin.com/hakasek/edit?html,css,output

ПРОФИ: это портативное решение, нет необходимости знать родительский селектор (это может быть очень хорошо в общих случаях), и не нужно беспокоиться о конфликте с другими элементами.

Минусы: все братья и сестры должны быть четко определены (например, с классом или атрибутом).