Artı işareti ( +) bir sonraki kardeş içindir.

Önceki kardeş için bir eşdeğer var mı?

Hayır, "önceki kardeş" seçicisi yok.

İlgili bir notta, ~genel halef kardeş (yani eleman bundan sonra gelir, ancak hemen sonra değil) anlamına gelir ve bir CSS3 seçicisidir. +bir sonraki kardeş içindir ve CSS2.1'dir.

Bkz . Seçici Seviye 3 ve 5.7'deki bitişik kardeş birleştirici . Basamaklı Stil Sayfaları Seviye 2 Revizyon 1 (CSS 2.1) Spesifikasyonundaki bitişik kardeş birleştirici .

~İhtiyacınıza bağlı olarak çalışabilecek tüm önceki kardeşleri (tersi ) şekillendirmenin bir yolunu buldum .

Diyelim ki bir bağlantı listeniz var ve bir tanesinin üzerine geldiğinizde, öncekilerin tümü kırmızıya dönmelidir. Bunu şöyle yapabilirsiniz:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

Seviye 4 seçiciler:has() (daha önce konu göstergesi !) ile daha önce bir kardeş seçmenize izin verir:

previous:has(+ next) {}

… Ancak yazma sırasında, tarayıcı desteği için kanayan kenarın ötesine biraz mesafe var.

orderEsnek ve ızgara düzenlerinin özelliklerini düşünün .

Aşağıdaki örneklerde flexbox'a odaklanacağım, ancak aynı kavramlar Grid için de geçerli.

Flexbox ile önceki bir kardeş seçici simüle edilebilir.

Özellikle, flex orderözelliği elemanları ekranın etrafında hareket ettirebilir.

İşte bir örnek:

B öğesi üzerine geldiğinde A öğesinin kırmızıya dönmesini istiyorsunuz.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

ADIMLARI

1. Make ula esnek konteyner.
   
   

   ul { display: flex; }

2. İşaretlemede kardeşlerin sırasını ters çevirin.
   
   

   <ul>
      <li>B</li>
      <li>A</li>
   </ul>

3. A Öğesini hedeflemek için bir kardeş seçici kullanın ( ~veya +yapacak).
   
   

   li:hover + li { background-color: red; }

4. orderGörsel ekrandaki kardeşlerin sırasını geri yüklemek için flex özelliğini kullanın .
   
   

   li:last-child { order: -1; }

... ve voilà! Önceki bir kardeş seçici doğar (veya en azından simüle edilir).

İşte tam kod:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

<ul>
    <li>B</li>
    <li>A</li>
</ul>

Flexbox özelliklerinden:

5.4. Görüntüleme Sırası: orderözellik

Esnek öğeler varsayılan olarak kaynak belgede göründükleri sırayla görüntülenir ve düzenlenir. orderMülkiyet Bu sıralamasını değiştirmek için kullanılabilir.

orderMülkiyet kontrolleri esnek ürün sıralı gruplara atayarak, esnek kap içinde görüntülendiği sıra. <integer>Esnek öğenin hangi sıralı gruba ait olduğunu belirten tek bir değer alır .

orderTüm esnek öğeler için başlangıç değeri 0'dır.

Ayrıca orderCSS Izgara Düzeni spesifikasyonlarına bakın .

Flex orderözelliğiyle oluşturulan "önceki kardeş seçici" örnekleri .

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

Bir Yan Not - CSS Hakkında İki Eski İnanç

Flexbox, CSS hakkında uzun zamandır var olan inançları yıkıyor.

Böyle bir inanış, CSS'de önceki bir kardeş seçicinin mümkün olmadığıdır .

Bu inancın yaygın olduğunu söylemek yetersiz kalır. Aşağıda yalnızca Yığın Taşması ile ilgili soruların bir örneği verilmiştir:

• Seçicileri kullanarak CSS'deki bir öğenin önceki kardeşini seçin
• CSS: önceki kardeşi seç
• CSS önceki kardeşi seç
• CSS'de önceki bitişik seçici
• Fareyle üzerine gelindiğinde önceki kardeşleri seç
• Önceden kardeş almak için CSS seçici
• Fareyle üzerine gelindiğinde kardeş öğelerinin rengini CSS kullanarak değiştirme
• Selenyum css sözdizimi kullanarak önceki kardeş nasıl seçilir
• Başka bir öğeden ÖNCE gelen bir öğeyi seçmek için CSS Seçici?
• Yalnızca CSS kullanarak etkin girişin önceki kardeşine stil ekleme
• Sonraki ve önceki elemanlar için CSS seçici
• Bir bölme üzerine geldiğinde diğer öğeler nasıl etkilenir?

Yukarıda açıklandığı gibi, bu inanç tamamen doğru değildir. Flex orderözelliği kullanılarak önceki bir kardeş seçici CSS'de simüle edilebilir .

z-indexMit

Uzun süredir devam eden bir başka inanç da z-indexsadece konumlandırılmış elemanlar üzerinde çalıştığıdır.

Aslında, spec'in en güncel sürümü - W3C Editörün Taslağı - bunun hala doğru olduğunu iddia ediyor:

9.9.1 Yığın seviyesini belirtme: z-index özellik

z-index

• Değer: otomatik | | kalıt
• İlk: otomatik
• Şunun için geçerlidir: konumlandırılmış elemanlar
• Kalıtsal: hayır
• Yüzdeler: Yok
• Medya: görsel
• Hesaplanan değer: belirtildiği gibi

_{(vurgu eklendi)}

Ancak gerçekte, bu bilgiler eski ve yanlıştır.

Olan elementler esnek ürün veya ızgara öğeler bile yığılan bağlamlar yaratabilir positionolduğunu static.

4.3. Esnek Ürün Z-Siparişi

Esnek öğeler, satır içi bloklarla tam olarak aynı şekilde boyanır, ancak ham belge sırası yerine siparişte değiştirilmiş belge sırası kullanılır ve olsa bile yığın içeriği oluşturmak z-indexdışındaki değerler kullanılır .autopositionstatic

5.4. Z ekseni Siparişi: z-indexözellik

Izgara öğeler boyama sırası tam ham belge düzenin yerine kullanılan bu sırayla modifiye edilmiş bir belge için hariç olmak üzere, içi blok ile aynıdır, ve z-indexdaha başka değerler autobile bir istifleme içeriğini oluşturmak positionolup static.

İşte z-indexkonumlandırılmamış esnek öğeler üzerinde çalışırken bir gösteri : https://jsfiddle.net/m0wddwxs/

Aynı sorum vardı, ama sonra "duh" bir anım vardı. Yazmak yerine

x ~ y

yazmak

y ~ x

Açıkçası bu, "y" yerine "x" ile eşleşiyor, ancak "bir eşleşme var mı?" basit DOM geçişi sizi doğru öğeye javascript'te döngüden daha verimli bir şekilde götürebilir.

Orijinal sorunun bir CSS sorusu olduğunun farkındayım, bu yüzden bu cevap muhtemelen tamamen alakasız, ancak diğer Javascript kullanıcıları da benim yaptığım gibi arama yoluyla soruya rastlayabilirler.

İki numara . Temel olarak HTML'de istediğiniz öğelerin HTML sırasını ters çevirme ve
~ Sonraki kardeşler operatörünü kullanma:

float-right + HTML öğelerinin sırasını tersine çevir

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:red;
} 

<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

İle Ana direction: rtl;iç elemanlarının sırası ters +

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}

Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

+bir sonraki kardeş içindir. Önceki kardeş için bir eşdeğer var mı?

İki balta seçiciyi kullanabilirsiniz : !ve?

Orada 2 sonraki kardeş seçiciler geleneksel CSS'deki:

• +olduğunu hemen sonraki kardeş seçicisi
• ~olan herhangi bir müteakip kardeş seçici

Geleneksel CSS'de, daha önce bir kardeş seçici yoktur .

Ancak, ax CSS işlemci sonrası kitaplığında, önceki 2 kardeş seçici vardır :

• ?olan hemen önceki Kardeş seçici (zıt +)
• !olan herhangi bir önceki Kardeş seçici (zıt ~)

Çalışma Örneği:

Aşağıdaki örnekte:

• .any-subsequent:hover ~ div sonraki herhangi birini seçer div
• .immediate-subsequent:hover + div hemen sonrakini seçer div
• .any-previous:hover ! div öncekileri seçer div
• .immediate-previous:hover ? div hemen öncekini seçer div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Başka bir flexbox çözümü

HTML'deki öğelerin sırasını tersine kullanabilirsiniz. Daha sonra Michael_B'nin cevabındaorder olduğu gibi kullanmanın yanı sıra veya düzeninize bağlı olarak da kullanabilirsiniz .flex-direction: row-reverse;flex-direction: column-reverse;

Çalışma örnek:

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

Şu anda bunu yapmanın resmi bir yolu yok, ancak bunu başarmak için küçük bir numara kullanabilirsiniz! Deneysel olduğunu ve bazı sınırlamaları olduğunu unutmayın ... ( navigatör uyumluluğu konusunda endişeleriniz varsa bu bağlantıyı kontrol edin )

Yapabileceğiniz şey bir CSS3 seçici kullanmaktır: sözde classe nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Sınırlamalar

• Sonraki öğelerin sınıflarına göre önceki öğeleri seçemezsiniz
• Bu sözde sınıflar için aynıdır

Tam konumu biliyorsanız, :nth-child()aşağıdaki tüm kardeşlerin temelli bir hariç tutulması işe yarayacaktır.

ul li:not(:nth-child(n+3))

Hangi li3. s önce tüm s seçin (örneğin 1. ve 2.). Ancak, bence bu çirkin görünüyor ve çok sıkı bir kullanım alanına sahip.

Ayrıca, nci çocuğu sağdan sola seçebilirsiniz:

ul li:nth-child(-n+2)

Aynı şeyi yapar.

Hayır. CSS ile mümkün değildir. Kalp ;-) "Cascade" alır.

Ancak, sayfanıza JavaScript ekleyebiliyorsanız , biraz jQuery sizi hedefinize ulaştırabilir.
Sen jQuery en kullanabilirsiniz findhedef seçmek için geriye dönük izleme ardından, hedef element / sınıf / id bir "look-ahead" yerine getirmektir.
Sonra öğeniz için DOM (CSS) yeniden yazmak için jQuery kullanın.

Mike Brant'ın bu cevabına dayanarak , aşağıdaki jQuery snippet'i yardımcı olabilir.

$('p + ul').prev('p')

Bu önce hepsini seçer <ul> hemen a'yı izleyen<p> .
Sonra o <p>s kümesi önceki tüm seçmek için "geri izler" <ul>.

Etkili bir şekilde, "önceki kardeş" jQuery ile seçildi.
Şimdi, .cssbu öğe için CSS yeni değerlerinizi iletmek için işlevi kullanın.

Benim durumumda kimliğine sahip bir DIV seçmenin bir yolunu arıyordum #full-width, ama SADECE sınıfıyla (dolaylı) soyundan bir DIV varsa .companies.

Altında tüm HTML kontrol vardı .companies , ancak üstündeki HTML'nin hiçbirini değiştiremedim.
Ve çağlayan sadece 1 yöne gidiyor: aşağı.

Böylece TÜM seçebilirim #full-width.
Ya .companiesda sadece a #full-width.
Ama olabilir değil sadece seçmek #full-widtholduğunu s devam .companies .

Ve yine, .companiesHTML'de daha yüksek bir sayı ekleyemedim . HTML'nin bu kısmı harici olarak yazılmıştır ve kodumuzu tamamlamıştır.

Ama jQuery ile, ben yapabilirsiniz gerekli seçmek #full-widths, daha sonra uygun bir stil atamak:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

Bu , CSS'de standarttaki belirli öğeleri hedeflemek için seçicilerin nasıl kullanıldığına benzer şekilde hepsini bulur #full-width .companiesve yalnızca bunları seçer .companies.
Sonra .parents"backtrack" için kullanır ve TÜM ebeveynleri seçer .companies,
ancak bu sonuçları sadece #fill-widthöğeleri tutmak için filtreler , böylece sonunda bir sınıf soyundan gelen
bir #full-widtheleman seçer .companies.
Son olarak, widthortaya çıkan öğeye yeni bir CSS ( ) değeri atar .

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

jQuery Referans Dokümanları:
$ () veya jQuery () : DOM öğesi.
. find : Seçili, jQuery nesnesi veya öğe tarafından filtrelenen geçerli eşleşen öğeler kümesindeki her öğenin torunlarını edinin.
. ebeveynler : Eşleşen öğeler kümesindeki her öğenin hemen önceki kardeşini edinin. Bir seçici sağlanırsa, yalnızca bu seçiciyle eşleşmesi durumunda önceki kardeşini alır (sonuçları yalnızca listelenen öğeleri / seçicileri içerecek şekilde filtreler).
. css : Eşleşen öğe kümesi için bir veya daha fazla CSS özelliği ayarlayın.

Hiçbir "önceki" kardeş seçicisi maalesef, ama can muhtemelen hala konumlandırma (örn şamandıra hakkı) kullanarak aynı etkiyi elde. Ne yapmaya çalıştığınıza bağlıdır.

Benim durumumda, öncelikle CSS 5 yıldızlı derecelendirme sistemi istedim. Önceki yıldızları renklendirmem (veya simgeyi değiştirmem) gerekirdi. Her öğeyi doğru bir şekilde yüzerek, esasen aynı etkiyi elde ediyorum (yıldızlar için html 'geriye' yazılmalıdır).

Bu örnekte FontAwesome kullanıyorum ve fa-star-o ve fa-star unicodesları arasında geçiş yapıyorum http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

Kesin hedefinize bağlı olarak, bir ana seçici seçmeden bir tane kullanmadan faydalanmanın bir yolu vardır (biri olsa bile) ...

Diyelim ki:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

Çorap bloğunu (çorap renkleri dahil) aralık kullanarak görsel olarak öne çıkarmak için ne yapabiliriz?

Güzel olan ama olmayan:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

Ne var:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

Bu, tüm bağlantı bağlantılarını üstte 15 piksel kenar boşluğuna sahip olacak şekilde ayarlar ve LI'lerde UL öğesi (veya başka etiketler) olmayanlar için 0'a sıfırlar.

Önceki kardeş tr seçmek için bir çözüm gerekiyordu. React ve Styled bileşenlerini kullanarak bu çözümü buldum. Bu benim kesin çözümüm değil (saatlerce sonra bellekten geliyor). SetHighlighterRow işlevinde bir kusur olduğunu biliyorum.

OnMouseOws üst üste satır dizinini duruma ayarlar ve önceki satırı yeni bir arka plan rengiyle yeniden oluşturur

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

Benzer bir problemim vardı ve bu nitelikteki tüm problemlerin şu şekilde çözülebileceğini öğrendim:

1. tüm öğelerinize bir stil verin.
2. seçtiğiniz öğeye bir stil verin.
3. sonraki öğelere + veya ~ kullanarak bir stil verin.

ve böylece mevcut, önceki öğelerinizi (geçerli ve sonraki öğelerle geçersiz kılınan tüm öğeler) ve sonraki öğelerinize stil uygulayabilirsiniz.

misal:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

Umarım birine yardımcı olur.