CSSで複数ある指定の一つだけをclassの一部だけ無効にしたい

いつもお世話になっております。
表題の件ですが、四角い要素が横に３つ並んでいて、右端の要素にだけ枠線を表示させたくないと考えております。
コードで表すと下記のような感じです。
何か解決策がある方いらっしゃれば教えていただけると幸いです。よろしくお願いいたします。

html
1<div class="hoge">
2  hoge1
3</div>
4<div class="hoge">
5  hoge2
6</div>
7<div class="hoge">  <!--ここだけ枠線を右側に表示させたくない-->
8  hoge3
9</div>

css
1.hoge {
2   width: 259px;
3   float:left;
4   list-style-type: none;
5   position: relative;　
6   border-right:1px solid #F0FFFF; /*この処理のみをクラスの最後の要素には無効にしたい*/
7}

行動規範の内容に同意します

回答2件

HTMLとCSSで指している場所が違う気もしますが、方法としては

最後の要素だけ特別なクラスを付与する
:last-childを使う（参考サイト）

のどちらかでできるかと思います。
最後の要素だけborder-rightをなくすという書き方でもいいですし、
最後の要素以外border-rightを設定するという書き方でもいいです。

投稿2019/10/18 09:50

dice142

総合スコア5158

mm--_--mm

2019/10/18 10:02

ご回答いただきありがとうございます！そういったやり方があるのですね！今後の開発の参考にさせていただきます！

行動規範の内容に同意します

ベストアンサー

なんかHTMLとCSSのタグが合っていないですが

CSS
1.hoge {
2  width: 259px;
3  float:left;
4  list-style-type: none;
5  position: relative;　
6}
7.hoge:not(:last-of-type) {
8  border-right:1px solid #F0FFFF;
9}