間にテキストコンテンツがない別のスパンに続くスタイルスパン

Question

CSSルールを作成して、spanという要素を他のスパンの直後に置いて、その間にテキストコンテンツはありません。だから私は、この例で<span class="bar">Second</span>のスタイルをしたい：私はいくつかのpseudoclassesを試してみた

また

/* colours both "Second" and "Fourth" */ 
span.foo+span.bar { 
    color: red; 
} 

：私は成功せず、両方の+（adjacent）と~（general）コンビネータを使って試してみた

<span class="parent"> 
    <span class="foo">First</span> 
    <span class="bar">Second</span> <!-- this one! --> 
</span> 
<span class="parent"> 
    <span class="foo">Third</span> 
    Some text. 
    <span class="bar">Fourth</span> <!-- but not this! --> 
</span> 

：

/* colours "Third", "Some text." and "Fourth" */ 
span.parent :only-of-type { 
    color: red; 
} 

私は純粋なCSSのいくつかの実用的なソリューションを探しています。試験的な機能（:hasなど）を使用している可能性がありますが、Chromeブラウザでサポートされている必要があります。

Answer 1

開口部が<span>すぐに次の場合を除き、このような前の閉じ</span>：

<span>...</span><span>...</span> 

は常にはスパンの間にtextnodeがあるでしょう - 何の読み取り可能なテキストが存在しない場合でも、まだ空白があるでしょう。

その結果、次の2つの条件をチェックする必要があります。

• は<span>の前要素 ... <span>のですか？
• はtextnodeであり、はすぐにが<span>に先行する...空白（または不在）ですか？

これらの条件の両方がtrueている場合は、動的に検査下<span>にクラスを追加することができます。

実施例：

var parents = document.getElementsByClassName('parent'); 
 

 
for (var i = 0; i < parents.length; i++) { 
 
    var spans = parents[i].getElementsByTagName('span'); 
 
    
 
    for (var j = 1; j < spans.length; j++) { 
 

 
     // Checks preceding textNode for readable text 
 
     var followsWhitespace = (/^\s*$/).test(spans[j].previousSibling.textContent); 
 

 
     // Just in case there is no preceding textNode at all 
 
     if (spans[j].previousSibling.nodeName === 'SPAN') { 
 
      followsWhitespace = true; 
 
     } 
 

 
     // Identifies preceding element 
 
     var previousElementName = spans[j].previousElementSibling.nodeName; 
 

 
     if ((previousElementName === 'SPAN') && (followsWhitespace === true)) { 
 
      spans[j].classList.add('follows-span'); 
 
     } 
 
    } 
 
}

.follows-span { 
 
font-weight: bold; 
 
color: rgb(255, 0, 0); 
 
}

<span class="parent"> 
 
    <span class="foo">First</span> 
 
    <span class="bar">Second</span> <!-- this one! --> 
 
</span> 
 
<span class="parent"> 
 
    <span class="foo">Third</span> 
 
    Some text. 
 
    <span class="bar">Fourth</span> <!-- but not this! --> 
 
</span>