Блог

Базовый вопрос:

 /* can this: */
x[attr="value1"] ~ y[attr="value1"],
x[attr="value2"] ~ y[attr="value2"],
x[attr="value3"] ~ y[attr="value3"] {
    ...
}

/* be written in some waylike this: (?) */
x[attr="*"] ~ y[attr="*"] {
    ...
}

/* practically check if the attribute values are the same, without hard-coding every possible value */
/* apply only if value of y[attr] matches the value of x[attr], dynamically */
/* something like a **if-previous-attribute-value-matches-my-own-attribute-value check** */
 

Я хорошо знаю, что эту проверку можно легко выполнить с помощью JS (я сделал это в мае и по сей день).
Суть упражнения в том, чтобы сделать это только с помощью CSS (и это работает просто отлично).

Но это раздувает как разметку, так и область CSS, и я хотел бы выяснить, может ли быть достигнуто что-то вроде проверки значения атрибута if-previous-attribute-value-matches-my-own-attribute-value в CSS без необходимости жестко кодировать значение.

Это упражнение, которое я выполняю уже довольно давно:
я использую флажки и селекторы атрибутов CSS для создания некоторых компонентов только для CSS
(использование состояния :checked — для имитации события щелчка / переключения и селекторов-аналогов — для применения изменений к компоненту на основе указанного состояния :checked).

 <form class="cssTabs">

    <input class="cssTabs-btn" name="cssTabs-btn" type="radio" data-tabs-id="1" checked="checked" />
    <input class="cssTabs-btn" name="cssTabs-btn" type="radio" data-tabs-id="2"/>
    <input class="cssTabs-btn" name="cssTabs-btn" type="radio" data-tabs-id="3"/>

    <div class="cssTabs-labelGroup">
        <div class="cssTabs-btnLabel" data-tabs-id="1">Button 1</div>
        <div class="cssTabs-btnLabel" data-tabs-id="2">Button 2</div>
        <div class="cssTabs-btnLabel" data-tabs-id="3">Button 3</div>
    </div>

    <div class="cssTabs-contentGroup">
        <div class="cssTabs-content" data-tabs-id="1"> Content 1 </div>
        <div class="cssTabs-content" data-tabs-id="2"> Content 2 </div>
        <div class="cssTabs-content" data-tabs-id="3"> Content 3 </div>
    </div>

</form>
 

«Проблема» заключается в том, что разметка для определенных компонентов не позволяет соответствующему флажку быть родным братом соответствующего элемента, влияющего на:

 .cssTabs-btn:checked  ~ .cssTabs-btnLabel { ... }
 

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

 .cssTabs-btn[data-tabs-id="1"]:checked  ~ .cssTabs-labelGroup .cssTabs-btnLabel[data-tabs-id="1"],
.cssTabs-btn[data-tabs-id="2"]:checked  ~ .cssTabs-labelGroup .cssTabs-btnLabel[data-tabs-id="2"],
.cssTabs-btn[data-tabs-id="3"]:checked  ~ .cssTabs-labelGroup .cssTabs-btnLabel[data-tabs-id="3"] { 
    ... 
}
 

Как видно, это может привести к раздуванию разметки, но, что более важно, увеличить объем синтаксического анализа CSS (при возникновении макетов / перестановок).
И он также не может автоматически адаптироваться к количеству существующих «сценариев»

Итак, возможно ли что-то вроде динамической проверки значения предыдущего атрибута, если оно соответствует моему собственному значению атрибута, любым ортодоксальным / хакерским способом в CSS? 🙂