最後のネストされた要素を選択

Question

最後にhas-errors divを選択するにはどうすればよいですか？

<section class="form-block"> 
    <div class="form-group has-errors"> 
      ERROR! 
    </div> 
    <div class="form-group has-errors"> 
      ERROR! 
    </div> 
    <div class="form-group"> 
      stuff 
    </div> 
</section> 

私が使用して最初のhas-errorsを選択することができます。

.form-block .form-group.has-errors:first-child { 
    background-color: blue; 
} 

しかしlast-childは、上記動作しません。 .form-group.has-errorsの最後のインスタンスを選択するにはどうすればよいですか？ CSSで

jsfiddle

Answer 1

いくつかの特定のルールがある場合を除き、それは厳しいものになります - それは常に最後から2番目だよう。要するに、あなたが求めているのは、存在しないlast-of-classのようなものです。 last-of-typeがありますが、要素タイプ（div、pなど）にのみ適用され、クラスには適用されません。

次善策は、.form-group.has-errorクラスの最後の要素を取得するバニラJSです。

const hasErrors = document.querySelectorAll('.form-group.has-errors'); 
 
hasErrors[hasErrors.length -1].style.color = 'red';

<section class="form-block"> 
 
    <div class="form-group has-errors"> 
 
      ERROR! 
 
    </div> 
 
    <div class="form-group has-errors"> 
 
      ERROR! 
 
    </div> 
 
    <div class="form-group"> 
 
      stuff 
 
    </div> 
 
</section>

それが修正される可能性がページに複数のフォームブロックの、これは有用なものにするには：

クラスを持つ最後の兄弟を選択

const formGroups = Array.from(document.querySelectorAll('.form-block')); 
 

 

 
formGroups.forEach(function(block) { 
 
    const hasErrors = block.querySelectorAll('.form-group.has-errors'); 
 
    hasErrors[hasErrors.length -1].style.color = 'red'; 
 
});

Form Block 1 
 
<section class="form-block"> 
 
    <div class="form-group has-errors"> 
 
      ERROR! 
 
    </div> 
 
    <div class="form-group has-errors"> 
 
      ERROR! 
 
    </div> 
 
    <div class="form-group"> 
 
      stuff 
 
    </div> 
 
</section> 
 

 
Form Block 2 
 
<section class="form-block"> 
 
    <div class="form-group has-errors"> 
 
      ERROR! 
 
    </div> 
 
    <div class="form-group has-errors"> 
 
      ERROR! 
 
    </div> 
 
    <div class="form-group"> 
 
      stuff 
 
    </div> 
 
</section>

Answer 2

CSSだけでは達成できません。あなただけの持っている：

• :last-child - 親でのこのタイプの最後の要素
• ない最初の - 親
• :last-of-typeの最後の子：selector ~ selector

あなたが持っているので.form-group Iブートストラップを使用していると仮定しているので、jQueryを使用しています。

$('section').each(function(){ 
    $('.has-errors', $(this)).last().css({borderBottom: '1px solid red'}) 
}) 

[？私はCSSで特定のクラス名を持つ「最後の子」を選択するにはどうすればよい]（の