Возможно, создав расширение.
mkdir -p ~/.local/share/gnome-shell/extensions/Disable_Clock@ocelot
cd ~/.local/share/gnome-shell/extensions/Disable_Clock@ocelot
Создайте файл metadata.json.
gedit metadata.json
Вырежьте следующий код и вставьте в редактор и сохраните .
{"shell-version": ["3.2"], "uuid": "Disable_Clock@ocelot", "name": "Disable Clock", "description": "Disable Clock from the top of panel"}
Создайте файл extension.js.
gedit extension.js
Вырежьте следующий код и вставьте в редактор и сохраните.
const St = imports.gi.St;
const Main = imports.ui.main;
function init(meta) {
}
function enable() {
Main.panel._centerBox.remove_actor(Main.panel._dateMenu.actor);
}
function disable() {
Main.panel._centerBox.add_actor(Main.panel._dateMenu.actor);
}
] Перезапустите gnome-shell и включите расширение «Disable Clock» с помощью gnome-tweak-tool
Как уже упоминалось несколькими другими, нет способа стилизовать родительский элемент элемента, используя только CSS, но следующее работает с jQuery:
$("a.active").parents('li').css("property", "value");
Короткий ответ НЕТ, на этом этапе в CSS нет parent selector, но если вы все равно не хотите менять элементы или классы, второй вариант использует JavaScript, что-то вроде этого: [ ! d0]
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; //your property: value;
}
});
или более короткий путь, если вы используете NO в своем приложении:
$('a.active').parents('li').css('color', 'red'); //your property: value;
Вы можете попытаться использовать гиперссылку в качестве родителя, а затем изменить внутренние элементы при наведении. Например:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
Таким образом вы можете изменить стиль во множестве внутренних тегов на основе опрокидывания родительского элемента.
Селектор CSS «General Sibling Combinator» может быть использован для того, что вам нужно:
E ~ F {
property: value;
}
Это соответствует любому элементу F, которому предшествует элемент E.
Я знаю, что OP искал CSS-решение, но его легко достичь с помощью jQuery. В моем случае мне нужно было найти родительский тег <ul> для тега <span>, содержащегося в дочернем <li>. В jQuery есть селектор :has, поэтому можно определить родителя для его дочерних элементов:
$("ul:has(#someId)")
выберет элемент ul с дочерним элементом с id someId. Или, чтобы ответить на исходный вопрос, что-то вроде следующего должно сделать трюк (непроверенный):
$("li:has(.active)")
По крайней мере, вплоть до CSS3 и включая CSS3, вы не можете выбрать это. Но это может быть сделано довольно легко в настоящее время в JS, вам просто нужно добавить немного ванильного JavaScript, обратите внимание, что код довольно короткий.
cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
//console.log(el.nodeName)
if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
console.log(el)};
});
<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>
Это наиболее обсуждаемый аспект спецификации Selectors Level 4. С помощью этого селектора будет возможность стилизовать элемент в соответствии с его дочерним элементом, используя восклицательный знак после данного селектора (!).
Например:
body! a:hover{
background: red;
}
установит красный цвет фона, если пользователь наводится на любой якорь.
Но нам нужно ждать реализации браузеров: (
a ~ li {
background: red
}
В css3 добавлен новый селектор, поэтому, если html выглядит так:
<ul>
<li>
<a>Some text</a>
</li>
</ul>
Фактически вы можете воздействовать на родителя элемента «a», который является «li «
Нет, вы не можете выбрать родителя только в css.
Но поскольку у вас уже есть класс .active, не было бы легче перенести этот класс на li (вместо этого из a)? Таким образом, вы можете получить доступ только к li и a только через css.
Попробуйте переключить a на block дисплей, а затем используйте любой желаемый стиль. Элемент a заполнит элемент li, и вы сможете изменить его внешний вид по своему желанию. Не забудьте установить li padding на 0.
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}
Кто-нибудь предложил что-то подобное? Просто идея горизонтального меню ...
часть HTML
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>
часть CSS
/* hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }
Обновлена демо-версия и остальная часть кода [ ! d3]
Обновлено демо и остальная часть кода как использовать его с текстовыми входами - выберите родительский набор полей
Я не думаю, что вы можете выбрать родителя только в css.
Но поскольку у вас уже есть класс .active, не было бы легче перенести этот класс на li (вместо a)? Таким образом, вы можете получить доступ только к li и a только через css.
Вот взломать с помощью pointer-events с hover:
<!doctype html>
<html>
<head>
<title></title>
<style>
/* accessory */
.parent {
width: 200px;
height: 200px;
background: gray;
}
.parent,
.selector {
display: flex;
justify-content: center;
align-items: center;
}
.selector {
cursor: pointer;
background: silver;
width: 50%;
height: 50%;
}
</style>
<style>
/* pertinent */
.parent {
background: gray;
pointer-events: none;
}
.parent:hover {
background: fuchsia;
}
.parent
.selector {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="selector"></div>
</div>
</body>
</html>
Насколько мне известно, не в CSS 2. CSS 3 имеет более надежные селектор, но не всегда реализуется во всех браузерах. Даже с улучшенными селекторами я не верю, что он выполнит именно то, что вы указали в своем примере.
Существует плагин, который расширяет CSS, чтобы включить некоторые нестандартные функции, которые действительно могут помочь при разработке веб-сайтов. Это называется EQCSS.
Одна из вещей, добавленных EQCSS, - это родительский селектор. Он работает во всех браузерах IE8 и выше. Вот формат:
@element 'a.active' {
$parent {
background: red;
}
}
Итак, здесь мы открыли запрос элемента для каждого элемента a.active, а для стилей внутри этого запроса такие вещи, как $parent, имеют смысл, потому что есть контрольная точка , Браузер может найти родителя, потому что он очень похож на parentNode в JavaScript.
EQCSS и еще одна демонстрация $parent, которая работает в IE8, а также скриншот в Если у вас нет IE8 для тестирования.
EQCSS также включает в себя еще одну демонстрацию $parent, которая работает в IE8 $prev для элемента перед выбранным элементом, $this только для тех элементов, которые соответствуют запросу элемента и т. д.
Вы можете использовать этот скрипт.
*! > input[type=text] { background: #000; }
Это выберет любого родителя текстового ввода. Но подождите, еще многое. Если вы хотите, вы можете выбрать указанного родителя:
.input-wrap! > input[type=text] { background: #000; }
или выбрать его, когда он активен:
.input-wrap! > input[type=text]:focus { background: #000; }
Посмотрите этот HTML:
<div class="input-wrap">
<input type="text" class="Name"/>
<span class="help hide">Your name sir</span>
</div>
вы можете выбрать span.help, когда активен input и показать его:
.input-wrap! .help > input[type=text]:focus { display: block; }
Есть еще много возможностей; просто проверьте документацию плагина.
BTW, он работает в IE.
Технически нет прямого способа сделать это, однако вы можете сортировать это с помощью jquery или javascript.
Howeve, вы также можете сделать что-то подобное.
a.active h1 {color:blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
Если вы хотите достичь этого, используя jQuery, здесь приведена ссылка для родительского селектора jQuery
Нет родительского селектора; так же, как нет предыдущего селектора. Одна из веских причин не иметь этих селекторов заключается в том, что браузер должен пройти через всех дочерних элементов элемента, чтобы определить, следует ли применять класс. Например, если вы написали:
body:contains-selector(a.active) { background: red; }
Затем браузеру придется подождать, пока он не загрузится, и все разыгрывается до </body>, чтобы определить, должна ли страница быть красной или нет.
В этой статье Почему у нас нет родительского селектора, это подробно объясняет.
W3C исключил такой селектор из-за огромного воздействия производительности на браузер.
Псевдоэлемент :focus-within позволяет выбрать родителя, если у потомка есть фокус.
Элемент может быть сфокусирован, если он имеет атрибут tabindex.
Поддержка браузера для фокуса внутри
Поддержка браузера для фокусировки внутри
Пример
.click {
cursor: pointer;
}
.color:focus-within .change {
color: red;
}
.color:focus-within p {
outline: 0;
}
<div class="color">
<p class="change" tabindex="0">
I will change color
</p>
<p class="click" tabindex="1">
Click me
</p>
</div>
Это возможно с помощью амперсанда в SASS:
h3
font-size: 20px
margin-bottom: 10px
.some-parent-selector &
font-size: 24px
margin-bottom: 20px
вывод CSS:
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}
Хотя в настоящее время в стандартном CSS нет родительского селектора, я работаю над (личным) проектом под названием ax (то есть, расширенный синтаксический селектор CSS / ACSSSS), который среди семи новых селекторов включает в себя:
- непосредственный родительский селектор < (который позволяет противоположный выбор >) выбрать любой предка селектор ^ (который позволяет сделать противоположный выбор [SPACE])ax в настоящее время находится на относительно ранней стадии развития BETA.
См. демонстрацию здесь:
http://rounin.co.uk/projects/axe/axe2 .html
(сравните два списка слева в стандартном селекторе и два списка справа в стиле с селекторами тонов)
В CSS мы можем каскадировать свойства по иерархии, но не в противоположном направлении. Чтобы изменить родительский стиль в дочернем событии, вероятно, используйте jQuery.
$el.closest('.parent').css('prop','value');