CSS3 seçici: sınıf adında türünün ilk örneği?

:first-of-typeBelirli bir sınıf adına sahip ilk öğeyi seçmek için CSS3 seçiciyi kullanmak mümkün müdür ? Testimle başarılı olamadım, bu yüzden değil mi?

Kurallar ( http://jsfiddle.net/YWY4L/ ):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

Hayır, sadece bir seçici kullanmak mümkün değil. :first-of-typeSözde sınıfı ilk elemanı seçer türü ( div, pvs.). Bu sözde sınıfla bir sınıf seçiciyi (veya bir tür seçiciyi) kullanmak, verilen sınıfa sahipse (veya verilen türde ise) ve kardeşleri arasında türünün ilk örneği olan bir öğeyi seçmek anlamına gelir .

Ne yazık ki, CSS :first-of-classsadece bir sınıfın ilk oluşumunu seçen bir seçici sunmuyor . Geçici bir çözüm olarak, şöyle bir şey kullanabilirsiniz:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Geçici çözüm için açıklamalar burada ve burada verilmiştir .

Taslak CSS Seçicileri Seviye 4 of <other-selector>, :nth-childseçiciye bir dilbilgisi eklemeyi önerir . Bu, belirli bir diğer seçiciyle eşleşen n. Çocuğu seçmenizi sağlar :

:nth-child(1 of p.myclass) 

Önceki taslaklarda yeni bir sözde sınıf kullanıldığından, :nth-match()söz konusu sözdiziminin özelliğin bazı tartışmalarında görebilirsiniz:

:nth-match(1 of p.myclass)

Bu, şimdi WebKit'te uygulanmıştır ve bu nedenle Safari'de kullanılabilir, ancak bunu destekleyen tek tarayıcı gibi görünüyor . Blink (Chrome) , Gecko (Firefox) uygulamak için açılan biletler ve Edge'de uygulamak için bir istek var , ancak bunların hiçbirinde belirgin bir ilerleme yok.

Bu , belirli bir sınıf adına sahip ilk öğeyi seçmek için CSS3 seçici : türün ilkini kullanmak mümkün değildir .

Bununla birlikte, hedeflenen öğenin önceki öğe kardeşi varsa, negatif sınıf CSS sözde sınıfı ile bitişik kardeş seçicilerini hemen aynı sınıf adına sahip önceki bir öğeye sahip olmayan bir öğeyle eşleştirmek için birleştirebilirsiniz:

:not(.myclass1) + .myclass1

Tam çalışma kodu örneği:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

Referansınız için bir çözüm buldum. bazı grup div'lerinden ilk iki aynı sınıf div grubundan seçim yapın

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

BTW, neden :last-of-typeçalıştığını bilmiyorum , ama :first-of-typeçalışmıyor.

Jsfiddle ile ilgili deneylerim ... https://jsfiddle.net/aspanoz/m1sg4496/

Bu eski bir iş parçacığıdır, ancak arama sonuçları listesinde hala yüksek göründüğü için yanıt veriyorum. Gelecek geldiğine göre, nth-child sözde seçiciyi kullanabilirsiniz.

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

Nth-child sözde seçici güçlüdür - parantezler sayıları olduğu kadar formülleri de kabul eder.

Daha fazla bilgi için: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Yedek bir çözüm olarak, sınıflarınızı aşağıdaki gibi bir üst öğeye sarabilirsiniz:

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

Bunu nasıl açıklayacağımdan emin değilim ama bugün benzer bir şeyle karşılaştım. İyi .user:first-of-type{}çalışırken ayarlayamama .user:last-of-type{}. Herhangi bir sınıf veya stil olmadan bir div içine sarıldıktan sonra bu düzeltildi:

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

Bunu, sınıfın aynı sınıfın kardeşi olan her öğesini seçip ters çevirerek, sayfadaki hemen hemen her öğeyi seçecek şekilde yapabilirsiniz, bu nedenle sınıf tarafından tekrar seçmeniz gerekir.

Örneğin:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

Basitçe :firstbenim için çalışıyor, neden bundan henüz bahsedilmedi?