如果在另一個元素之前應用規則到元素的CSS選擇器

我正在尋找一種方法將不同的元素應用於某些CSS，具體取決於後面的內容。例如，與此HTML：如果在另一個元素之前應用規則到元素的CSS選擇器

<ul> 
    <li> 
    <span class="title">Some Title</span> 
    <span class="subtitle">With Some Subtitle</span> 
    </li> 
    <li> 
    <span class="title">Only a Title</span> 
    </li> 
</ul>

我想這取決於閹不同的規則適用於.title或不存在.subtitle。

我可以找出最接近的是相鄰的兄弟選擇

.title + .subtitle { /* rules */ }

但是，將規則應用於由一個前面.title的.subtitle元件。相反，我希望規則適用於其後有.subtitle元素的.title元素。

注意：這並不重要，這是瀏覽器廣泛支持我目前的使用情況。我目前唯一的目標是webkit。

來源

2010-08-04 Alex Wayne

你可能要考慮使用jQuery – 2010-08-04 19:23:21

這似乎是欺騙的東西，感覺就像我應該能夠用一個時髦的選擇做。 – 2010-08-04 19:24:14

CSS3 spec中沒有用於「較老」兄弟姐妹的兄弟組合器。

在這種情況下，您可能可以通過:only-child逃脫。

li > span.title:only-child { /* rules */ }

來源

2010-08-04 19:38:15

這適用於這種特殊情況。謝謝。如果這個合格的選擇器真的起作用了，那將是非常棒的。 – 2010-08-04 19:44:10

偷偷摸摸的選擇器。我喜歡。 – jessegavin 2010-08-04 19:54:23

我認爲這將需要回溯佈局引擎，因此不可用。你可以在jQuery的做到這一點相當簡單不過：

$('span.title + span.subtitle').prev().addClass('cssClass')

來源

2010-08-04 19:51:35

如果在另一個元素之前應用規則到元素的CSS選擇器

回答

相關問題