Последний в родительском селекторе CSS

Ответ 1

Опрос завершился в селекторе темы (собственное имя так называемого "родительского селектора" ), заменяемого гораздо более универсальным псевдо-классом :has(), который документирован здесь (с интересным именем привязки, #relational, интересно, будет ли это приклеиваться).

Реализации, вероятно, придут только тогда, когда спецификация для этой функции более стабильна. В настоящее время, с такими разрушительными изменениями, которые полностью заменяют селектор субъекта псевдоклассом, я не берусь за это в ближайшее время. Тем не менее, вполне вероятно, что псевдокласс класса :has() будет придерживаться, но может ли он быть реализован в CSS, остается видимым из-за его самой природы. См. этот раздел того же проекта, чтобы узнать о профилях реализации.

Причина :has() более универсальна в том, что с селектором объектов в любом черновике никогда не было ясно, если в одном сложном селекторе может быть более одного селектора объектов (поскольку один комплексный селектор может иметь только один субъект) и/или если функциональные псевдоклассы, такие как :matches(), приняли селектор субъекта. Но поскольку псевдокласс является простым селектором, вы знаете, что :has() может быть принят везде, где будет принят псевдокласс.

В качестве примера это делает такие селекторы следующими теоретически возможными:

/* 
 * Select any p
 * that is a sibling of a ul
 * that has more than one li child.
 */
ul:has(> li:nth-of-type(2)) ~ p,     /* p follows ul */
p:has(~ ul:has(> li:nth-of-type(2))) /* p precedes ul */

Принимая во внимание, что, используя селектор объектов, это было бы возможно только в том случае, если :matches() принял селектор объекта, который никогда не указывался непосредственно в спецификации:

ul:matches(! > li:nth-of-type(2)) ~ p, /* p follows ul */
!p ~ ul:matches(! > li:nth-of-type(2)) /* p precedes ul */

Здесь вы также можете увидеть, почему мне не нравится имя "родительский селектор" для любой формы селектора - его можно использовать для гораздо большего.

Ответ 2

Согласно Wikipedia:

Селекторы не могут подняться

В настоящее время CSS не предлагает выбора родителя или предка элемента, который удовлетворяет определенным критериям. Селектор CSS Уровень 4, который все еще находится в статусе рабочего проекта, предлагает такой селектор, но только как часть "полного" профиля селектора, а не "быстрый" профиль, используемый в динамическом стилировании CSS. Более продвинутая схема выбора (например, XPath) позволит использовать более сложные таблицы стилей. Основные причины, по которым рабочая группа CSS ранее отвергала предложения для родительских селекторов, связаны с производительностью браузера и проблемами с постепенным рендерингом.

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

Изменить: Подробнее см. этот ответ.

Ответ 3

Ну в css нет родительского селектора. Но из-за небольшой хитрости я могу использовать .childinternal: parent {background-color: yellow} в своем локальном файле CSS, не углубляясь в jquery или javascript.

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

Есть два способа реализации (оба показаны). Первый - это псевдокласс: parent это можно сделать только в локальной таблице стилей, поскольку некоторые браузеры не допускают плохие псевдо-версии.

Другой - тот, который перебирает все таблицы стилей, проверяя "ссылку на класс GetParent".

Для меня это работает. Я обычно беру первый, который самый быстрый.

Решение:

$(function() {

  //First possibility when using local css file (=faster)//

  $.when($.get("your local filename.css")).done(function(response) {
    var spl = response.split(":parent");
    if (spl.length > 1) {
      var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
      var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
      var eClas = $(clas).parent().attr('style');
      eClas = eClas == undefined ? '' : (eClas + '').toString;
      $(clas).parent().attr('style', eClas + ';' + cs);
    }
  });
});

// second possibility looping all used css files

for (var s = document.styleSheets.length - 1; s >= 0; s--) {
  var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || []; // IE support
  for (var c = 0; c < cssRules.length; c++) {
    if (cssRules[c].selectorText) {
      if (cssRules[c].selectorText.indexOf('.GetParent') > -1) {
        var spl = cssRules[c].cssText.split(".GetParent");
        if (spl.length > 1) {
          var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
          var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
          var eClas = $(clas).parent().attr('style');
          eClas = eClas == undefined ? '' : (eClas + '').toString;
          $(clas).parent().attr('style', eClas + ';' + cs);
        }
      }
    }
  }
}

.childinternal :parent {
  background-color: yellow
}

.childexternal .GetParent {
  Background-color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Not affected Main parent
  <div class="childinternal">
    <p>Not affected parent (no parent selector)</p>
  </div>
  <div class="childinternal:parent">
    <p>local css file used (:parent selector)
      <span style='color:grey;font-size:0.6em'>Only works on local files so not possible to show in this snippet
      </span>
    </p>
  </div>
</div>

<div>
  <div class="childexternal .GetParent">
    <p>external css file used (.GetParent class selector)</p>
    <div class="x"></div>
  </div>
</div>