最後の要素のクラス名の次の要素 - CSS3

以下のコードを使用して、要素3ではなく値2と3で要素を強調表示できます。最後の子とn番目の最後の型を使用しましたが、期待どおりに動作します。現在、CSS3最後の要素のクラス名の次の要素 - CSS3

を使用して実装しようとして、アクティブと点滅

ノーjQueryのソリューションを変更しないように目盛り3のマークと値3と活性クラスの変更の両方に点滅を適用する - 問題は、クラスのすぐ次の要素を強調しています私は、アクティブクラスの使用CSSずにクラスhightlightの最初の要素を選択しようとしていますのみ

HTML：

<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

</head> 
<div class="steps" style="width:26%;float:left"> 
     <div class="stepSection"> 
<table> 
      <tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr> 
      <tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr> 
      <tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr> 
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr> 
     </table> 
     </div> 
     </div> 

    <div style="width:2%;float:left;"> 
      <div class="highlight active">1</div> 
      <div class="highlight active">2</div> 
      <div class="highlight">3</div> 
      <div class="highlight">4</div> 
     </div>

CSS3：

.highlight{ 
    color:white; 
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background: rgb(234,116,0); 
    display: inline-block; 
    text-align: center; 
} 

.active{ 
    background:green; 
} 

@keyframes blink { 
to { background: rgb(234,116,0); } 
} 

.active + .highlight{ 
color: white; 
background: white; 
animation: blink 2s steps(2, start) infinite; 
}

出典

2017-02-24 divya reddy

はちょっと見えますあまりにも多くの時間...また、あなたはママあなたの質問を少し明確にする？あなたが求めていることを理解するのは難しいです。 – Matt

Matt、私はclass1の次の要素を点滅させようとしています。value1要素がアクティブで、2が点滅し、value2要素が3点滅したら、短期間で、クラスhightlightの最初の要素をアクティブクラスなしで選択しようとしています。 CSSのみ –

方法1：jqueryの あなたが点滅クラスに

.blink { 
color: white; 
background: white; 
animation: blink 2s steps(2, start) infinite; 
}

Working Js fiddle

方法2を持っているので、

$(".active:last").next().addClass("blink")

ようにjQueryを使用して、それを行うと、あなたのCSSを変更することができます： あなたはそれが唯一のCSSを使用して行いたい場合は、.last

<div style="width:2%;float:left;"> 
    <div class="highlight active">1</div> 
    <div class="highlight active last">2</div> 
    <div class="highlight">3</div> 
    <div class="highlight">4</div> 
</div>

を言う最後の要素にクラスを追加することによって、あなたの最後の要素を維持予約する必要があると、あなたは

.last + .highlight { 
    color: white; 
    background: white; 
    animation: blink 2s steps(2, start) infinite; 
}

のようなCSSありません方法3：

変更あなたのCSS

div.active + div:not(.active){ 
    color: white; 
    background: white; 
    animation: blink 2s steps(2, start) infinite; 
    }

へ

基本的には、その前にclass activeを持つ要素と、classがアクティブでない次のクラスを検索します。代わりにあなたが使用することができますn番目の最後型の

working jsfiddle

出典

2017-02-24 18:54:14 Imprfectluck

ありがとうございますが、CSS3で可能で、CSS3で実装しようとしましたが、jquery –

に感謝しています。最後はうまくいきましたが、jqueryを使用する必要があります。クラスがアクティブな要素2を取得し、点滅を3 –

に適用する方法はありますか？jqueryを使用せずにCSS3だけを使用して最後のものを確認してください。 – Imprfectluck

：

.highlight + .highlight:not(.active):nth-of-type(3) {

スニペット：あなたはglyphiconクラスを使用よう

.highlight { 
 
    color: white; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: rgb(234, 116, 0); 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.active { 
 
    background: green; 
 
} 
 

 
@keyframes blink { 
 
    to { 
 
     background: rgb(234, 116, 0); 
 
    } 
 
} 
 

 

 

 
.highlight + .highlight:not(.active):nth-of-type(3) { 
 
    color: white; 
 
    background: white; 
 
    animation: blink 2s steps(2, start) infinite; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="steps" style="width:26%;float:left"> 
 
    <div class="stepSection"> 
 
     <table> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>1.</td> 
 
       <td><span>one</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>2.</td> 
 
       <td><span>two</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>3.</td> 
 
       <td><span>three</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>3.</td> 
 
       <td><span>four</span></td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<div style="width:2%;float:left;"> 
 
    <div class="highlight active">1</div> 
 
    <div class="highlight active">2</div> 
 
    <div class="highlight">3</div> 
 
    <div class="highlight">4</div> 
 
</div>

出典

2017-02-24 19:28:41 gaetanoM

アクティブなクラスを変更した場合、CSSのすべての条件を追加する必要があります。 –

はいgaetonM、CSSを使用してアクティブクラスなしでクラスhightlightの最初の要素を選択しようとしています –

最後の要素のクラス名の次の要素 - CSS3

答えて

関連する問題