Alt öğelerine bağlı olarak bir öğeye CSS stilleri uygulama

Bir öğe için yalnızca eşleşen öğe belirli bir öğe içeriyorsa (doğrudan alt öğe olarak) uygulanan bir CSS stili tanımlamak mümkün müdür?

Bunun en iyi şekilde bir örnek kullanılarak açıklandığını düşünüyorum.

Not : Hangi alt öğeyi içerdiğine bağlı olarak üst öğeyi biçimlendirmeye çalışıyorum .

<style>
  /* note this is invalid syntax. I'm using the non-existing
   ":containing" pseudo-class to show what I want to achieve. */
  div:containing div.a { border: solid 3px red; }
  div:containing div.b { border: solid 3px blue; }
</style>

<!-- the following div should have a red border because
     if contains a div with class="a" -->
<div>
  <div class="a"></div>
</div>

<!-- the following div should have a blue border -->
<div>
  <div class="b"></div>
</div>

Not 2 : Javascript kullanarak bunu başarabileceğimi biliyorum, ama bazı bilinmeyen CSS özellikleri kullanarak bunun mümkün olup olmadığını merak ettim.

Bildiğim kadarıyla, alt öğeye dayalı olarak bir üst öğeyi biçimlendirmek, CSS'nin kullanılabilir bir özelliği değildir. Bunun için muhtemelen komut dosyasına ihtiyacınız olacaktır.

Söylediğin gibi div[div.a]ya div:containing[div.a]da söylediğin gibi bir şey yapman harika olurdu , ama bu mümkün değil.

JQuery'ye bakmayı düşünebilirsiniz . Seçicileri 'içeren' tiplerle çok iyi çalışır. Div, alt içeriğine bağlı olarak seçilebilir ve daha sonra üst öğeye tek bir satırda bir CSS sınıfı uygulayabilirsiniz.

JQuery kullanırsanız, bunun çizgileri boyunca bir şey işe yarayabilir (denenmemiş, ancak teori orada):

$('div:has(div.a)').css('border', '1px solid red');

veya

$('div:has(div.a)').addClass('redBorder');

CSS sınıfıyla birlikte:

.redBorder
{
    border: 1px solid red;
}

İşte jQuery "has" seçicisinin belgeleri .

Temel olarak hayır. Aşağıdaki teoride peşinde olduğun şey olurdu :

div.a < div { border: solid 3px red; }

Maalesef mevcut değil.

"Neden cehennem" çizgisinde birkaç yazı var. Shaun Inman tarafından yapılan iyi bir et oldukça iyi:

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

@ Kp'nin cevabının üstüne:

Bununla ilgileniyorum ve benim durumumda, bir alt öğe göstermek ve buna göre üst nesnenin yüksekliğini düzeltmek zorundayım (otomatik boyutlandırma, hata ayıklamak için zamanım olmadığından bir bootstrap başlığında çalışmıyor) .

Ancak üst öğeyi değiştirmek için javascript kullanmak yerine, üst öğeye dinamik olarak bir CSS sınıfı ekleyeceğim ve CSS'yi seçerek çocukları buna göre göstereceğim. Bu, kararları bir CSS durumuna dayanmayan mantık içinde tutacaktır .

tl; dr; ave bstilleri <div>çocuğa değil , ebeveyne uygulayın (elbette herkes bunu yapamaz. yani kendi kararlarını veren açısal bileşenler).

<style>
  .parent            { height: 50px; }
  .parent div        { display: none; }
  .with-children     { height: 100px; }
  .with-children div { display: block; }
</style>

<div class="parent">
  <div>child</div>
</div>

<script>
  // to show the children
  $('.parent').addClass('with-children');
</script>

Benim durumumda, DataTables ile dinamik olarak işlenen bir tablo için bir giriş onay kutusu içeren bir öğenin hücre dolgusunu değiştirmek zorunda kaldım:

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

İnitComplete işlevi içinde aşağıdaki satır kodunu uyguladıktan sonra , satırların anormal derecede yüksek bir yükseklikle görüntülenmesini sabitleyen doğru dolguyu üretebildim

 $('tbody td:has(input.a)').css('padding', '0px');

Artık, üst öğeye doğru stillerin uygulandığını görebilirsiniz:

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

Esasen, bu cevap @ KP'nin cevabının bir uzantısıdır, ancak bunu uygulamak için ne kadar çok işbirliği yapılırsa o kadar iyidir. Özetle, umarım bu işe yarar çünkü başka birine yardımcı olur! Son olarak, beni doğru yöne yönlendirdiğiniz için @KP'ye çok teşekkür ederim!