Bir CSS üst seçici var mı?

Bağlantı <li>elemanının doğrudan üst öğesi olan öğeyi nasıl seçerim?

Örnek olarak, CSS'm şöyle bir şey olurdu:

li < a.active {
    property: value;
}

Açıkçası bunu JavaScript ile yapmanın yolları var, ancak CSS Seviye 2'ye özgü bir çeşit geçici çözüm olduğunu umuyorum.

Stil vermeye çalıştığım menü bir CMS tarafından dışarı atılıyor, bu yüzden aktif öğeyi öğeye taşıyamam <li>...

Herhangi bir fikir?

Şu anda CSS'de bir öğenin üst öğesini seçmenin bir yolu yoktur.

Bunu yapmanın bir yolu olsaydı, mevcut CSS seçici özelliklerinden herhangi birinde olurdu:

• Seçiciler Seviye 3 Spec
• CSS 2.1 Seçicileri Spesifikasyonu

Bununla birlikte, Seçiciler Seviye 4 Çalışma Taslağı , :has()bu yeteneği sağlayacak bir sahte sınıf içerir . JQuery uygulamasına benzer olacaktır .

li:has(> a.active) { /* styles to apply to the li tag */ }

Ancak, Mayıs 2020 itibariyle, bu hala herhangi bir tarayıcı tarafından desteklenmemektedir .

Bu arada, bir üst öğe seçmeniz gerekiyorsa JavaScript'e başvurmanız gerekir.

Ebeveynleri yalnızca CSS'de seçebileceğinizi sanmıyorum.

Ancak zaten bir .activesınıfa sahip olduğunuz gibi , o sınıfı li(yerine a) taşımak daha kolay olacaktır . Her iki erişebilir Bu şekilde live asadece CSS ile.

Bu komut dosyasını kullanabilirsiniz :

*! > input[type=text] { background: #000; }

Bu, metin girişinin herhangi bir üst öğesini seçecektir. Ama bekleyin, daha fazlası var. İsterseniz, belirtilen bir üst öğe seçebilirsiniz:

.input-wrap! > input[type=text] { background: #000; }

Veya etkin olduğunda seçin:

.input-wrap! > input[type=text]:focus { background: #000; }

Bu HTML'ye göz atın:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

Bunu seçebilirsiniz span.helpzaman inputetkindir ve bunu göstermek:

.input-wrap! .help > input[type=text]:focus { display: block; }

Daha birçok özellik var; sadece eklentinin belgelerine bakın.

BTW, Internet Explorer'da çalışır.

Birkaç başka kişinin belirttiği gibi, bir öğenin üst öğelerini yalnızca CSS kullanarak stilize etmenin bir yolu yoktur, ancak aşağıdakiler jQuery ile çalışır :

$("a.active").parents('li').css("property", "value");

Evet: :has()

Tarayıcı desteği: yok

Üst seçici yok; daha önceki kardeş seçici olmadığı gibi. Bu seçicilere sahip olmamanın iyi bir nedeni, tarayıcının bir sınıfın uygulanıp uygulanmayacağını belirlemek için bir öğenin tüm alt öğelerinden geçmesi gerektiğidir. Örneğin, şunu yazdıysanız:

body:contains-selector(a.active) { background: red; }

Daha sonra tarayıcının </body>, sayfanın kırmızı olup olmayacağını belirlemek için her şeyi yükleyene ve ayrışana kadar beklemesi gerekir.

Neden bir ana seçicimiz yok makalesi ayrıntılı olarak açıklıyor.

CSS 2'de bunu yapmanın bir yolu yoktur. Sınıfı ekleyebilir live aşağıdakilere başvurabilirsiniz a:

li.active > a {
    property: value;
}

Geçmek için deneyin aiçin blockekrana ve ardından istediğiniz herhangi bir stil kullanın. aEleman dolduracak lieleman ve istediğiniz gibi kendi görünüşünü değiştirmek mümkün olacak. liDolguyu 0 olarak ayarlamayı unutmayın .

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

CSS seçici “ Genel Kardeş Birleştirici ” belki istediğiniz gibi kullanılabilir:

E ~ F {
    property: value;
}

Bu F, öğeden önce gelen herhangi bir öğeyle eşleşir E.

Bildiğim kadarıyla CSS 2'de değil. CSS 3 daha sağlam seçicilere sahiptir, ancak tüm tarayıcılarda tutarlı bir şekilde uygulanmaz. Geliştirilmiş seçicilerle bile, örnekte belirttiğinizi tam olarak başaracağına inanmıyorum.

OP'nin bir CSS çözümü aradığını biliyorum ama jQuery kullanarak başarmak basit. Benim durumumda <ul>alt <span>etikette yer alan bir etiket için üst etiketi bulmam gerekiyordu <li>. jQuery :hasseçiciye sahiptir, bu nedenle içerdiği çocuklar tarafından bir ebeveyni tanımlamak mümkündür:

$("ul:has(#someId)")

seçecektir ulid ile bir alt öğe içeren öğeyi SomeID . Veya orijinal soruyu cevaplamak için, aşağıdakine benzer bir şey hile yapmalıdır (denenmemiş):

$("li:has(.active)")

Yalancı öğe :focus-within, bir alçağın odağı varsa bir üst öğenin seçilmesini sağlar.

Bir öğe, tabindexözniteliği varsa odaklanabilir .

Odaklanma için tarayıcı desteği

tabindex

Misal

.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>

Bu, Seçiciler 4. Düzey spesifikasyonunun en çok tartışılan yönüdür . Bununla, bir seçici verilen seçiciden (!) Sonra bir ünlem işareti kullanarak bir öğeyi çocuğuna göre şekillendirebilecektir.

Örneğin:

body! a:hover{
   background: red;
}

kullanıcı herhangi bir tutturucunun üzerine gelirse kırmızı bir arka plan rengi ayarlar.

Ancak tarayıcıların uygulanmasını beklemek zorundayız :(

Üst öğe olarak köprü kullanmayı ve ardından fareyle üzerine gelindiğinde iç öğeleri değiştirmeyi deneyebilirsiniz. Bunun gibi:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

Bu şekilde, üst öğenin üzerine gelmeye bağlı olarak stili birden çok iç etikette değiştirebilirsiniz.

Şu anda ebeveyn seçici yoktur ve W3C'nin görüşmelerinde tartışılmamaktadır. İhtiyacımız olup olmadığını anlamak için CSS'nin tarayıcı tarafından nasıl değerlendirildiğini anlamanız gerekir.

Burada çok fazla teknik açıklama var.

Jonathan Snook, CSS'nin nasıl değerlendirildiğini açıklıyor .

Chris Coyier, Veli seçici görüşmeleri hakkında .

Harry Roberts yine verimli CSS seçicileri yazma konusunda .

Ancak Nicole Sullivan'ın olumlu eğilimler hakkında bazı ilginç gerçekleri var .

Bu insanların hepsi ön uç geliştirme alanında birinci sınıftır.

Yatay menü için sadece bir fikir ...

HTML'nin bir parçası

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS'nin bir parçası

/* 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%; }

Güncellenmiş demo ve kodun geri kalanı

Metin girişleriyle nasıl kullanılacağıyla ilgili başka bir örnek - üst alan kümesini seçin

İşte kullanarak kesmek pointer-eventsile 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'yi, web siteleri tasarlarken gerçekten yardımcı olabilecek bazı standart olmayan özellikleri içerecek şekilde genişleten bir eklenti var. Buna EQCSS deniyor .

EQCSS'nin eklediği şeylerden biri bir üst seçici. Internet Explorer 8 ve sonraki tüm tarayıcılarda çalışır. İşte format:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Burada her öğede bir öğe sorgusu açtık a.activeve bu sorgunun içindeki stiller $parentiçin mantıklı gibi şeyler var, çünkü bir referans noktası var. Tarayıcı üst öğeyi bulabilir, çünkü parentNodeJavaScript'te çok benzer .

İşte bir demo$parent ve başka $parentInternet Explorer 8'de eserler olduğunu demo yanı sıra durumda bir ekran görüntüsü sizinle teste etrafında Internet Explorer 8'i yok .

EQCSS ayrıca meta seçiciler içerir : $prevseçili öğeden önceki öğe için ve $thisyalnızca öğe sorgusuyla eşleşen öğeler ve daha fazlası.

Şimdi 2019 ve CSS Yerleştirme Modülünün son taslağında aslında böyle bir şey var. Tanıtımı @nestat-kurallar.

3.2. Yuva Atma Kuralı: @nest

Doğrudan yuvalama güzel görünse de, biraz kırılgan. .Foo & gibi bazı geçerli iç içe yerleştirme seçicilerine izin verilmez ve seçiciyi belirli şekillerde düzenlemek kuralı beklenmedik şekilde geçersiz kılabilir. Ayrıca, bazı insanlar yuvalamayı görsel olarak çevredeki beyanlardan ayırt etmekte zorlanıyor.

Tüm bu sorunlara yardımcı olmak için, bu belirtim, stil kurallarını geçerli şekilde yerleştirme konusunda daha az kısıtlama getiren @nest kuralını tanımlar. Sözdizimi:

@nest = @nest <selector> { <declaration-list> }

@Nest kuralı bir stil kuralıyla aynı şekilde çalışır: bir seçiciyle başlar ve seçicinin eşleştiği öğelere uygulanan bildirimler içerir. Tek fark, @nest kuralında kullanılan seçicinin yuva içermesi gerektiğidir, bu da bir yerde iç içe yerleştirme seçici içerdiği anlamına gelir. Bireysel karmaşık seçicilerin tümü yuva içeriyorsa, bir seçici listesi yuva içerir.

(Yukarıdaki URL'den kopyalayıp yapıştırın).

Bu şartname kapsamındaki geçerli seçicilere örnek:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

Teknik olarak bunu yapmanın doğrudan bir yolu yoktur. Ancak, bunu jQuery veya JavaScript ile çözebilirsiniz.

Ancak, bunun gibi bir şey de yapabilirsiniz.

a.active h1 {color: blue;}
a.active p {color: green;}

jQuery

$("a.active").parents('li').css("property", "value");

Bunu jQuery kullanarak başarmak istiyorsanız, burada jQuery üst seçici için referans verilmiştir .

W3C, tarayıcı üzerindeki büyük performans etkisi nedeniyle böyle bir seçiciyi hariç tuttu.

Kısa cevap HAYIR ; parent selectorCSS'de bu aşamada a yok , ancak yine de öğeleri veya sınıfları değiştirmek zorunda kalmazsanız, ikinci seçenek JavaScript kullanıyor. Bunun gibi bir şey:

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;
  }
});

Veya uygulamanızda jQuery kullanıyorsanız daha kısa bir yol :

$('a.active').parents('li').css('color', 'red'); // Your property: value;

Şu anda standart CSS'de ebeveyn seçici olmamasına rağmen , 7 yeni seçiciden her ikisini de içeren ax (yani Artırılmış CSS Seçici Sözdizimi / ACSSSS ) adlı (kişisel) bir proje üzerinde çalışıyorum :

1. Bir hemen üst seçici <(ters seçim sağlar >)
2. Bir herhangi bir soy seçme ^ (ters seçim sağlar [SPACE])

balta şu anda nispeten erken bir BETA gelişme aşamasındadır.

Burada bir demo izleyin:

http://rounin.co.uk/projects/axe/axe2.html

(soldaki iki listeyi standart seçicilerle ve sağdaki iki listeyi balta seçicilerle karşılaştırın)

En azından CSS 3 dahil ve bu şekilde seçemezsiniz. Ancak günümüzde JavaScript'te oldukça kolay bir şekilde yapılabilir, sadece biraz vanilya JavaScript eklemeniz gerekir, kodun oldukça kısa olduğuna dikkat edin.

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>

Herhangi bir fikir?

CSS 4, geriye doğru yürümeye bazı kancalar eklerse fantezi olur . O zamana kadar (gerçi mümkündür değil tavsiye) kullanmak için ve / veya s için kırmak da CSS normal kapsamı dışında çalışmasına izin şeyler bağlandığından emin zamanki şekilde ve bu yoluyla ...checkboxradio input

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* ▼ - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}

<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... oldukça Brüt , ama dokunma ve yeniden dokunmatik şey mümkündür ama sadece CSS ile ve HTML bodyve :roothemen her yerden bağlayarak idve forözelliklerini radio/ checkbox inputs ve label tetikleyiciler ; muhtemelen birisi bir noktada bunlara nasıl dokunacağınızı gösterecektir.

Ek bir uyarı, sadece belirli bir kullanımdan sadece birinin kullanılması, ilk olarak / başka bir deyişle geçişli bir durum kazanmasıdır ... Ancak, birden çok etiketin hepsi aynı işaret edebilir , ancak bu hem HTML hem de CSS'nin daha kaba görünmesini sağlar.inputidcheckboxradio input

---

... CSS Seviye 2'ye özgü bir çeşit geçici çözüm olduğunu umuyorum ...

Diğer :seçicilerden emin değilim , ancak :checkedCSS öncesi 3 için. Doğru hatırlıyorsam [checked], yukarıdaki kodda bulabileceğiniz gibi bir şeydi , örneğin,

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... ama ::afterve bunun gibi şeyler için :hover, ilk olarak hangi CSS sürümünün göründüğünden emin değilim.

Tüm bunlar, lütfen bunu asla üretimde kullanmayın, öfkeyle bile değil. Şaka olarak emin olun veya başka bir deyişle bir şey sırf edebilirsiniz yapılması her zaman anlamına gelmez gerekir .

Hayır, yalnızca CSS'de üst öğeyi seçemezsiniz.

Ancak zaten bir .activesınıfa sahip olduğunuz gibi , o sınıfı li(yerine a) taşımak daha kolay olacaktır . Her iki erişebilir Bu şekilde live asadece CSS ile.

Üst öğeyi temel alan üst öğeyi değiştirmek şu anda yalnızca <input>üst öğenin içinde bir öğemiz olduğunda gerçekleşebilir . Bir giriş odaklandığında, karşılık gelen üst öğe CSS kullanılarak etkilenebilir.

Aşağıdaki örnek :focus-withinCSS'de kullanımınızı anlamanıza yardımcı olacaktır .

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}

<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>

Sass'daki ve işareti ile mümkündür :

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS çıkışı:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

Bunu yapmak için bir JavaScript kodu tutardım. Örneğin, bir dizi üzerinden yinelediğinizde React'a, üst bileşene alt öğelerinizi içerdiğini belirten başka bir sınıf ekleyin:

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

Ve sonra basitçe:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

"CSS Çalışma Grubu'nun daha önce üst seçiciler için önerileri reddetmesinin başlıca nedenleri, tarayıcı performansı ve artımlı oluşturma sorunlarıyla ilgilidir."