Только CSS. Смещение по уровню выше и ниже или следующий по коду тег

Question

<div>
 title 1
 <div class="a1"> text 1 </div>
 <div> text 2 </div>
</div>

Есть ли возможность через CSS зацепиться за "div.a1" и от него пойти выше на 1 ступень, что-бы изменить цвет текста "title 1" ?
Есть ли возможность через CSS зацепиться за "div.a1" и от него пойти к следующему тегу на текущем уровне и изменить цвет "text 2" ?

Просто если использовать div.a1 { color:red; } то цвет измениться только в "text 1". По этому меня интересует что нужно дописать слева или справа от div.a1 что-бы выбрать выше на 1 уровень и изменить цвет "title 1" или соседний "text 2". И есть ли вообще такая возможность через CSS?

Answer 1

к сожалению пока нет в том виде разметки, что вы привели - свойства объекта всегда читаются слева направо

можно конечно сделать финт ушами, эффект будет схожий, но это не истинное обращение к элементу выше -

надо определить свойства для всех элементом главного div (в вашем примере), а потом использовать 2) для определения .a1 и того, что ниже .a1

но это частные случаи, например при разметке где выше .a1 несколько div, а не один трюк уже не сработает

да, можно, на этом принципе основаны всякие выпадающие списки, переопределение стандартных кнопок и т.д.

используйте .a1 + div

.a1 + div {
    background: red;
}

<div>
 title 1
 <div class="a1"> text 1 </div>
 <div> text 2 </div>
 <div> text 3 </div>
</div>

Answer 2

В CSS есть 2 относительных селектора:

el1 ~ el2 – выбрать все el2, которые идут после el1 на том же уровне вложенности.
el1 + el2 – выбрать el2, который идёт сразу после el1 на том же уровне вложенности.

Если со вторым всё понятно, то первый селектор el1 ~ el2 открывает довольно большие возможности. Можно объявить якоря el1 где-нибудь по-выше в DOM, тогда мы можем использовать элемент якоря как переменную, управляя классами, атрибутами и прочими свойствами которого мы можем управлять отображением хоть всей страницей.

Приведу пример. Простые табы на CSS.

В качестве якоря возьмем несколько <input type="radio"/>.

Переключение radio-боксов будут транслировать ярлыки табов <label for="...">.

Содержание всех табов будет скрыто. Но активный таб будет отображаться благодаря селекторам типа input:checked ~ .tab-panels div. Обратите внимание, что сам <div> с активной панелью содержания находится после выделенного <input>, но не на том же уровне, - он вложен в другой блок с классом tab-panels. В таком случае участие .tab-panels в селекторе input:checked ~ .tab-panels div обязательно, без него селектор работать не будет, так как просто не найдёт нужный div.

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

Помимо <input type="radio"> совместно с label часто используют <input type="checkbox">. Хотя, по сути, в качестве якоря можно использовать элементы любого типа.

                /* Этот пример сделан без использования JavaScript */

* {
  box-sizing: border-box;
}

body {
  padding: 10px;
  background: #888;
}

/* Для начала скроем от глаз якорный <input> */

input[name="tab-input"] {
  display: none;
}

/* Стили ярлыков табов <label> */

.tab-labels label {
  display: block;
  min-width: 100px;
  height: 40px;
  float: left;
  text-align: center;
  padding: 10px;
  border: 1px solid #444;
  border-bottom: none;
  background: #ddd;
  z-index: 1;
  top: 4px;
  position: relative;
  transition: .2s;
  transition-property: background, top;
}

.tab-labels label:hover{
  background: #ffd;
  top: 2px;
}

/* Обратите внимание на селекторы */
#tab1-input:checked~.tab-labels #tab1-label,
#tab2-input:checked~.tab-labels #tab2-label,
#tab3-input:checked~.tab-labels #tab3-label {
  transition: 0;
  background: #fff;
  box-shadow: 0 0 3px #000;
  top: 0;
  z-index: 3;
}

#tab1-input:checked~.tab-labels #tab1-label::after,
#tab2-input:checked~.tab-labels #tab2-label::after,
#tab3-input:checked~.tab-labels #tab3-label::after {
  content: " ";
  display: block;
  left: -10px;
  top: 25%;
  width: calc(100% + 20px);
  height: 50%;
  position: relative;
  background: #fff;
  z-index: 4;
  transition: 0;
}

/* Стили панелей содержания табов */

.tab-panels div {
  /* по умолчанию - все они скрыты */
  display: none; 
  clear: both;
  border: 1px solid #444;
  height: calc( 100vh - 80px);
  box-shadow: 0 0 3px #000;
  background: #fff;
  font-size: 20pt;
  padding: 10px;
  z-index: 2;
  position: relative;
}

#tab1-input:checked~.tab-panels #tab1-panel,
#tab2-input:checked~.tab-panels #tab2-panel,
#tab3-input:checked~.tab-panels #tab3-panel {
  /* но активная таба отображается */
  display: block;
}

<input type="radio" name="tab-input" value="tab1" id="tab1-input" checked/>
<input type="radio" name="tab-input" value="tab2" id="tab2-input" />
<input type="radio" name="tab-input" value="tab3" id="tab3-input" />

<div class="tab-labels">
  <label id="tab1-label" for="tab1-input">Таб 1</label>
  <label id="tab2-label" for="tab2-input">Таб 2</label>
  <label id="tab3-label" for="tab3-input">Таб 3</label>
</div>

<div class="tab-panels">
  <div id="tab1-panel">Содержание таба 1</div>
  <div id="tab2-panel">Содержание таба 2</div>
  <div id="tab3-panel">Содержание таба 3</div>
</div>

Answer 3

Задаём всем div один цвет, потом задаём цвет a1, а потом задаём следующему элементу после a1 и все три элемента окрасятся в свой цвет.

div {
  color: yellow;
}
div.a1 {
  color: red;
}
div.a1 + div {
  color: green;
}

<div>
 title 1
 <div class="a1"> text 1 </div>
 <div> text 2 </div>
</div>

БЛОГ НА HUSL

Только CSS. Смещение по уровню выше и ниже или следующий по коду тег

Ответы (3 шт):