Soru CSS üst seçici var mı?


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

Mesela benim CSS böyle bir şey olurdu:

li < a.active {
    property: value;
}

Açıkçası, bunu JavaScript ile yapmanın yolları var, ancak CSS Seviye 2'ye yerel olarak var olan bir çeşit geçici çözümün olmasını umuyorum.

Tarz etmeye çalıştığım menü bir CMS tarafından siliniyor, böylece aktif öğeyi <li> element ... (yapmamayı tercih ettiğim menü oluşturma modülünü temsilen).

Herhangi bir fikir?


2516
2018-06-18 19:59


Menşei


Aslında seçtiğim öğeyi göstermeye çalıştığım jQuery doc'larından ödünç almıyordum. Öneriniz, bir li etiketinin tüm çocuklarını seçecektir (bkz. w3.org/TR/CSS2/selector.html) - jcuenod
Bu sorunun daha fazla tartışılması stackoverflow.com/questions/45004/... - MatrixFrog
@Tomas li> a.active, üst öğeyi değil, çocuğu seçer. - Stewart
@MatrixFrog'un "Bu soruda zaten bir cevabı var" başlığı altında yer alan bu sayfaya bağlantı verdiğine dikkat çekmek ... - Agi Hammerthief
Bu soru için herhangi bir güncelleme var mı? Sorunun en son kaydedilen yazışmasının Mart 2014'te olduğuna inanıyorum. Neler oluyor? - Master Yoda


Cevaplar:


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

Bunu yapmanın bir yolu olsaydı, geçerli CSS seçicilerinin özelliklerinden birinde olurdu:

Bu arada, bir ana öğe seçmeniz gerekiyorsa JavaScript’e başvurmanız gerekir.


Seçiciler Seviye 4 Çalışma Taslağı içerir bir :has() aynı şekilde çalışan sözde sınıf jQuery uygulaması. 2018 itibariyle Bu hala herhangi bir tarayıcı tarafından desteklenmiyor.

kullanma :has() Orijinal soru şu şekilde çözülebilir:

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

2013
2018-06-18 20:16



Önceden önerilmiş ve reddedilmiş gibi görünüyor: stackoverflow.com/questions/45004/... - RobM
Gibi görünüyor konu seçici bir yeniden kullanma dışında ! Şimdi: The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector. - animuson♦
Prepended $ benim için daha iyi baktı ... ekli ! daha kolay gözden kaçabilir. - Christoph
Büyük arsa büküm! Seçiciler 4 WD güncellendi bugün Konu göstergesini, CSS uygulamaları tarafından kullanılacak olan hızlı profilden çıkarmak. Bu değişiklik kalırsa, artık söz konusu göstergeyi stil sayfalarında kullanamayacağınız anlamına gelir ( başka cevap) - Sadece Seçiciler API'sı ile ve tüm profilin uygulanabileceği başka bir yerde kullanabilirsiniz. - BoltClock♦
Bir başka önemli güncelleme: konu seçici sözdizimini tamamen ortadan kaldırmayı ve değiştirmeyi düşünüyor gibi görünüyor. :has() sözde herkes jQuery'den haberdar ve sevmeye başladı. En son ED, konu göstergesine yapılan tüm referansları kaldırmış ve :has()sözde. Kesin nedenleri bilmiyorum, ancak CSSWG bir süre önce bir anket yaptı ve sonuçlar bu kararı etkilemiş olmalı. Bu, jQuery ile uyumluluk (bu nedenle modifikasyonlar olmadan qSA'dan faydalanılabilir) ve konu göstergesi sözdizimi çok kafa karıştırıcı olduğu için çok olasıdır. - BoltClock♦


Ebeveyni yalnızca css'de seçebileceğinizi düşünmüyorum.

Ama zaten sahip olduğunuz gibi .active Sınıfı, bu sınıfı li (onun yerine a)? Bu şekilde, her ikisine de erişebilirsiniz. li ve a sadece css ile.


120
2018-06-18 20:08



Odaklayıcı bir öğe olmadığı için sözde seçiciyi liste öğesine taşıyamazsınız. Etkin seçiciyi kullanıyor, böylece ankraj aktif olduğunda liste öğesinin etkilenmesini istiyor. Liste öğeleri hiçbir zaman aktif durumda olmayacaktır. Bir kenara, böyle bir seçicinin mevcut olmaması talihsiz bir durumdur. Tam olarak erişilebilir klavyeye erişebilmek için saf bir CSS menüsü almak imkansız gibi görünebilir (kardeş seçimini kullanarak yuvalanmış listeler kullanılarak oluşturulacak alt menüler oluşturabilirsiniz, ancak liste bir kez daha odağı kazandığında tekrar gizlenir). Bu belirli bir conun için yalnızca CSS çözümleri varsa
@Dominic Aquilina Soruyu gözden geçirin, OP bir sınıf kullanıyor, sahte bir seçici değil. - jeroen


Bunu kullanabilirsiniz senaryo.

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

Bu, bir metin girişinin herhangi bir ebeveyini seçecektir. Ama bekleyin, hala daha fazlası var. İsterseniz, belirtilen bir ebeveyn seçebilirsiniz:

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

veya aktif olduğunda bunu 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çebilirsin span.help ne zaman input aktif ve göster:

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

Daha birçok yetenek var; sadece eklentinin belgelerini kontrol edin.

BTW, IE'de çalışıyor.


100
2017-08-13 10:13



jquery kullanarak varsayalım patent() daha hızlı olur. Ancak bu ihtiyaç test - Dan
@Idered Çocuk seçicisi olmayan bir Seçici Konunun CSS bildirimi olduğunda başarısız olur (#a! tek başına bir hata atar #a! p işler) ve diğerleri de Uncaught TypeError: Cannot call method 'split' of undefined: görmek jsfiddle.net/HerrSerker/VkVPs - HerrSerker
@HerrSerker Bence #a! geçersiz bir seçicidir, ne seçmeli? - Idered
@Idered bilmiyorum. Spec, yasadışı olduğunu söylemez. #a! kendini seçmeli. En azından JavaScript’te hata olmamalıdır - HerrSerker
Kabul edilen yanıt hakkındaki yorumma göre, yakın gelecekte bile polifiliğin gerekli olabileceği görülüyor, çünkü konu göstergesi hiçbir zaman CSS'deki tarayıcılar tarafından uygulanmayabilir. - BoltClock♦


Bazıları tarafından da belirtildiği gibi, bir elemanın ebeveynlerini sadece CSS kullanarak şekillendirmenin bir yolu yoktur; jQuery:

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

75
2017-12-14 14:51



< seçici mevcut değil (jQuery 1.7.1 kullanılarak doğrulandı). - Rob W
Belki bu <-syntax 2009'da çalıştı ama güncelledik (2013 için). - Alastair
Daha da iyisi, jQuery'nin yerleşik özelliğini kullanın :has() selektör: $("li:has(a.active)").css("property", "value");. CSS 4'lerin önerdiği gibi aynı şekilde okur ! Seçici. Ayrıca bakınız: :parent selektör, .parents() yöntem, .parent() yöntem. - Rory O'Kane
Ve kullanmak yerine .css("property", "value") Seçilen öğeleri şekillendirmek için genellikle .addClass("someClass") ve CSS'nizde var .someClass { property: value } (üzerinden). Bu şekilde stili, CSS'nin tam gücünü ve kullandığınız tüm ön işlemcileri not edebilirsiniz. - Rory O'Kane


Ebeveyn seçicisi yoktur; sadece önceki kardeş seçimi yok. Bu seçicilerin olmamalarının bir nedeni de, bir sınıfın uygulanıp uygulanmayacağını belirlemek için tarayıcının bir öğenin tüm çocuklarından geçmesi gerektiğidir. Örneğin, şunları yazdıysanız:

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

Daha sonra tarayıcı yüklenene kadar her şeyi beklemek zorunda kalacak. </body> Sayfanın kırmızı olup olmadığını belirlemek için

Bu makale Neden ana seçici kullanmıyoruz? ayrıntılı olarak açıklar.


44
2018-01-21 08:43



Tarayıcıyı daha hızlı hale getirin. internetin kendisi daha hızlı. Bu seçiciye kesinlikle ihtiyaç duyulmaktadır ve bunun uygulanmamasının nedeni, ne yazık ki, çünkü yavaş, ilkel bir dünyada yaşıyoruz. - vsync
aslında, seçici çok hızlı bir tarayıcıyı yavaşlatacaktır. - Salman A
Tarayıcı geliştiricilerinin javascript sürümü kadar hızlı (en azından) bir uygulama ile ortaya çıkacağına inanıyorum; - Marc.2377


Bunu css2'de yapmanın bir yolu yoktur. sınıfı li'ye ekleyebilir ve

li.active > a {
    property: value;
}

39
2018-06-18 20:06



Bir eleman göstergesini yaparak: blok, li alanın tamamına uyacak şekilde stil uygulayabilirsiniz. Aradığın stilin ne olduğunu açıklayabilirsen belki de bir çözüm bulmaya yardım edebilirim. - Josh
Bu aslında basit ve zarif bir çözümdür ve çoğu durumda, sınıfı ana üzerinde ayarlamak mantıklıdır. - Ricardo


CSS seçici “Genel Kardeşleştirici”İstediğiniz şey için kullanılabilir.

E ~ F {
    property: value;
}

Bu herhangi biriyle eşleşiyor F Öncelikle bir E öğesi.


26
2018-06-30 14:00



Bu doğru cevap değil, ama bu seçici hakkında bizi hatırladığınız için teşekkürler - Dan
Bu sadece kardeş seçmen, çocuk değil, ebeveyn ... soru arkadaşına cevap vermiyor. - Alireza


Geçiş yapmaya çalışın a için block görüntülemek ve istediğiniz herhangi bir stili kullanın. aeleman dolduracak li öğe ve istediğiniz gibi görünümünü değiştirebilirsiniz. Ayarlamayı unutma li 0'a kadar doldurma.

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

24
2017-11-23 09:03





Bildiğim kadarıyla CSS 2'de değil. CSS 3 daha güçlü seçicilere sahiptir, ancak tüm tarayıcılarda tutarlı bir şekilde uygulanmamıştır. Geliştirilmiş seçmenlerle bile, örneğinizde tam olarak belirttiğiniz şeyi gerçekleştireceğine inanmıyorum.


19
2018-06-18 20:09





OP'nin bir CSS çözümü aradığını biliyorum ama jQuery'yi kullanmak çok kolay. Benim durumumda <ul> için bir üst etiket <span> çocukta bulunan etiket <li>. jQuery vardır :has seçici böylece bir ebeveynin içerdiği çocuklar tarafından tanımlanabilir:

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

seçecek ul kimlikli bir alt öğe olan öğe SomeID. Ya da asıl soruya cevap vermek için, aşağıdaki gibi bir şey hile yapmalıdır (test edilmemiş):

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

17
2018-05-16 22:04



Veya kullan $yourSpan.closest("ul") ve span öğenizin üst öğesini UL alırsınız. Yine de cevabınız tamamen kapalı imho. CSS ile ilgili soruların tümünü jQuery çözümü ile yanıtlayabiliriz. - Robin van Baalen
Diğer cevaplarda da belirtildiği gibi, CSS 2'yi kullanarak bunu yapmanın bir yolu yoktur. Kısıtlama göz önüne alındığında, sağladığım cevap etkili olduğunu ve javascript imho kullanarak soruyu cevaplamanın en basit yoludur. - David Clarke
Tahmininiz düşünüldüğünde, bazı insanlar sizinle aynı fikirdedir. Ama tek cevap kabul edilen olanıdır; sade ve basit "İstediğiniz şekilde yapılamaz". Eğer soru bisikletin 60 milimini nasıl arşivleyecekseniz ve “basittir; arabaya binip gazla çarpmak” cevabını veriyorsanız, bu hala bir cevap değildir. Bu yüzden benim yorumum. - Robin van Baalen
Bu yaklaşım, neredeyse tamamen işe yaramaz hale getirir. Sorunları çözmek için SO'yı ararım, "tek cevabı" bulmak sorunu değil. Bu yüzden SO çok harika, çünkü bir kediyi cildin her zaman birden fazla yolu vardır. - David Clarke


Bu en çok tartışılan yönü Seçiciler Seviye 4 Şartname. Bu seçiciyle, verilen seçiciden (!) Sonra bir ünlem işareti kullanarak çocuğuna göre bir eleman stil edebilecek.

Örneğin:

body! a:hover{
   background: red;
}

Kullanıcı herhangi bir çapa üzerinde gezinirse kırmızı bir arka plan rengini ayarlayacaktır.

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


15
2018-05-05 18:24



Ne yazık ki, ama şimdi bu özellik benim bildiğim kadar özellikli değil ... - Qwertiy