Как сделать такой селектор в css?

Question

[newaitix]

<div class="tab-position">
<div class="tab pinned button-off unread">
<div class="tab-header">
</div>
</div>
</div>
<div class="tab-position">
<div class="tab button-off unread">
<div class="tab-header">
</div>
</div>
</div>
<div class="tab-position">
<div class="tab button-off unread">
<div class="tab-header">
</div>
</div>
</div>

Нужно применить стиль к .tab-position у которого есть потомок с классом .pinned
Как это сделать ?

Answer 1

[Ivan Bogachev]

В черновиках Selectors Level 4 есть мысль о псевдоклассе :has, который мог бы дать возможность проверять такие связи и писать что-то вроде

.tab-position:has(> .pinned) {
    /* . . . */
}

но на сегодняшний день ни один браузер это не поддерживает. Так что нет, такой селектор в CSS сделать пока нельзя.

Comments

[newaitix]

https://jsfiddle.net/1kg652ws/24/
Не работает.

[Ivan Bogachev]

newaitix, Процитирую самого себя:

на сегодняшний день ни один браузер это не поддерживает. Так что нет, такой селектор в CSS сделать пока нельзя.

[newaitix]

Ivan Bogachev, сори не заметил (
Ок. Но это плохие новости ((

[Надим]

Для этих целей существует JavaScript. Опубликуйте на нужных страницах код:

<script>
// Ищем все элементы с классом pinned у которых родитель tab-position
// и записываем найденные элементы в переменную all_el (см. ниже):
all_el = document.querySelectorAll('.tab-position > .pinned'); 

// Далее обходим массив найденных элементов при помощи цикла:
for (n = 0; n < all_el.length; n++) {
	
	// Для всех найденных pinned определяем его родителя посредством parentElement, а затем
	// к этому родителю добавляем класс parent_pinned (как пример, класс может быть любой):
	all_el[n].parentElement.classList.add('parent_pinned');
	
}
</script>

Этот код добавит к нужным вам .tab-position дополнительный класс, а уже на этот класс можете навешать стили:

.parent_pinned {
	background: #9f9;
}

[newaitix]

zkrvndm, Речь вообще не о js. Категория html, css.
Это не сайт а браузер vivaldi именно в нем нужно прописать стиль.

[newaitix]

zkrvndm, Вот вкладка pined

а вот вкладка без pined

[Rustam Bainazarov]

newaitix, на CSS на данный момент это невозможно.

[newaitix]

Рустам Байназаров, просто я родился не в том веке нужно реинкарнироваться в 22 веке. ((

[Надим]

newaitix, не вижу проблем. JS можно напрямую прописать в коде расширения. Только средствами css стили здесь не предопределить никак.

[newaitix]

zkrvndm, это не расширение.
Это браузер.

[Надим]

newaitix, это именно что расширение. Видите цифро-буквенный код в адресе? Найдите такую папку в конфигах хрома и там можно редактировать все исходники.

[newaitix]

zkrvndm, Найдите

[newaitix]

zkrvndm, Когда я навожу на элементы в консоли вы видите что подсвечивается вкладка а не объект в рабочей области окна браузера ?
Поставьте vivaldi, зайдите в vivaldi://flags, включите 2 флага - #silent-debugger-extension-api, #debug-packed-apps
Перезагрузите
и в контекстном меню браузера увидите это
Нажимаете "Инспектировать" и открывается инспектор окна браузера а не инспектор сайта.

[Надим]

newaitix, действительно нет, извиняюсь. А если попробовать инъектировать код при помощи другого расширения?
https://chrome.google.com/webstore/detail/custom-j...

[newaitix]

zkrvndm, Ну так это же вставляет код на страницу сайта а мы говорим про браузер.
Интерфейс браузера работает в отдельном объекте window.

[Надим]

newaitix, просто я не раз обращал внимание, что в манифесте расширения сайты можно указывать вот так: *://*
интуитивно предполагаю, что можно встраивать свой код в том числе и локальные веб-страницы других расширений.

[newaitix]

zkrvndm, вся проблема в том что интерфейс vivaldi генерируется здесь
C:\Users\newai\AppData\Local\Vivaldi\Application\2.7.1628.21\resources\vivaldi\bundle.js
То есть его создает js. А задача в том чтоб сделать закрепленные вкладки шириной 30px а не 31px
На изображении видно что разрабы vivaldi криворукие рукожопы и вмето float:left; сделали position: absolute; left: ...;
Это значит что нужно менять не только ширину вкладок а и их left.

[newaitix]

zkrvndm, У нас есть

<div id="tab-37" class="tab pinned button-off" title="" tabindex="-1">

и для всех class="tab pinned button-off" нужно прописать правило но правило должно касаться родителя ибо именно родителю задается width: 31px;

[newaitix]

zkrvndm, активная вкладка имеет tab active button-off а фоновая tab button-off

[newaitix]

zkrvndm, а bundle.js распарсить это жесть. Это того не стоит. Там 76 тысяч строк.

[Надим]

newaitix, попробовал по быстрому накидать заплатку, но нихрена не вышло - расширения не могут встраиваться в расширения, увы(

Если ты знаешь, где лежит bundle.js то в чем проблема? Не нужно его парсить, просто добавь туда свой код и все.

[newaitix]

zkrvndm, нужно добавить код именно туда где создается вкладка.
Как найти то место где это происходит не знаю.

[Надим]

newaitix, а вам не пофиг? Просто ставите условие, что если найдены такие-то элементы, делаем то-то.

[newaitix]

zkrvndm, и когда это условие будит выполняться ?

[newaitix]

zkrvndm, Вообще не разбираетесь в js походу ?

[Надим]

newaitix, да нет, разбираюсь, может и не супер хорошо, но вполне уверенно. По крайней мере в работе активно использую. Что мешает в bundle навесить обработчик, который по готовности дерева элементов найдет все элементы с нужным классом и отредактирует их?

[newaitix]

"который по готовности дерева" ну окей по готовности, то есть когда загрузился браузер он это сделал.
А когда я открываю новую вкладку дерево уже готово. Соответственно скрипт не отрабатывает.
DOMContentLoaded отрабатывает один раз.

[Надим]

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