擬似要素のnth-childを否定したい

Question

三本のborder-rightが見えるかと思います。このうちの最後の三本目は必要無いので擬似要素を使って消そうと思ったのですが、上手く指定できません。

目的は仕切りを縦に作ることですのでそちらの方法を教えてもらっても大変ありがたく感じます。
しかし、同じクラスで設定して一つの要素だけを否定する方法はこれからも使用することになるので教えてもらえると助かります。

.news_content :not(:last-child) {
border-right: #000 solid 2px;
親要素がnews_content なのでその子要素として指定したのですが、上手く適応できませんでした。

<section class="section_02">
  <div class="news_content">
    <ul>
      <li>2021.01.01</li>
      <li class="news_heading">NEWS</li>
    </ul>
    <p>テキストテキストテキストテキスト</p>
  </div>

<!-- 以下2回繰り返し -->

  </div>
  <div class="news_content">
    <ul>
      <li>2021.01.01</li>
      <li class="news_heading">NEWS</li>
    </ul>
    <p>テキストテキストテキストテキスト</p>
  </div>
  </div>
  <div class="news_content">
    <ul>
      <li>2021.01.01</li>
      <li class="news_heading">NEWS</li>
    </ul>
    <p>テキストテキストテキストテキスト</p>
  </div>
</section>



.section_02 {
  display: flex;
  margin-left: 15%;
}
.news_header {
  margin-bottom: 10px;
}

.news_content {
  margin-right: 50px;
  border-right: #000 solid 2px;
  padding-right: 10px;
}

.news_content ul {
  display: flex;
}

.section_02 ul {
  list-style: none;
  align-items: center;
}

.section_02 p {
  margin-top: 30px;
}

.news_heading {
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  margin-left: 20px;
}

Comments

[int32_t]

問題を再現できる完全なHTMLとCSSを開示してください。そのセレクタが合っているかどうかはHTMLを見ないとわかりません。

疑似要素というのは ::before や ::after のことです。質問は疑似クラスのことですね。
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

[hatena19]

考え方としては提示のコード :not(:last-child) で問題ないので、セレクタの指定を間違っているのでしょう。

[yusshi]

コードを挿入しました。
ご確認いただければ幸いです。

Answer 1

とりあえず、HTMLが下記だとして、

<div class="news_content">
  <div>aaaaa</div>
  <div>bbbbb</div>
  <div>ccccc</div>
</div>

.news_content :not(:last-child) {
  border-right: #000 solid 2px;
}

でいいはずです。ただし、孫要素などにも効いてきてしまうので、

.news_content > :not(:last-child) {
  border-right: #000 solid 2px;
}

として子要素に限定した方がいいでしょう。

Answer 2

.news_contentと:not(:last-child) {　の間にある半角スペースを削除してみてください。

.news_content:not(:last-child) {
border-right: #000 solid 2px;

Comments

[hatena19]

「.news_contentは親要素」と言ってますのでその半角スペースは必要では？

[hatena19]

追記されたHTMLを見たら、「.news_contentは親要素」という意味が異なっていたようです。
ですので、inquirerさんの回答で解決しそうです。

[yusshi]

親要素がsection_02だと判断してコーディングをしたのですが、上手く反映できません。原因がお分かりでしたら、返信いただければ幸いです。

[2ckD]

inquirerさんの回答をそのままコピペしてhtmlとして開きましたが、しっかりと最後の要素以外にcssを適用することができています。書き写し間違いはありませんか?エラーは出ていませんか?