Saf css kullanarak bir öğenin ilk çocuğu dışındaki herkesi gizle

Classa sınıf öğesinin ilk çocuğundan sonra diğer her çocuğu saklamaya çalışıyorum.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

div.classa {
    display:none;
}
div.classa:first-child {
    display:block !important;
}
<div class="content">
    

abc

    <div class="classa">some content</div>
    

xyz

    <div class="classa">more content</div>
    

header3

    <div class="classa">another content</div>
</div>
</div> </div>

Saf CSS kullanarak bu nasıl elde edilir.

11
İlk önce '

' veya '<div class = "classa">' göstermek ister misiniz?

katma yazar stanze, kaynak
göstermek istediğin şey hakkında kesin ol.
katma yazar Sushovan, kaynak
İlk önce '<div class = "classa">' göstermek istiyorum
katma yazar biztiger, kaynak

7 cevap

Check out here https://jsfiddle.net/32vw04jg/1/

<div class="content">
  <div>
    

abc

    <div class="classa">some content</div>
  </div>
  <div>
    

xyz

    <div class="classa">more content</div>
  </div>
  <div>
    

header3

    <div class="classa">another content</div>
  </div>
</div>


.content > div:not(:first-child) {
display: none;
}
22
katma

IE8’i desteklemek istiyorsanız, tek seçeneğiniz genel kardeş seçicisi :

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

div.classa ~ .classa {
    display: none;
}
<div class="content">
    

abc

    <div class="classa">some content</div>
    

xyz

    <div class="classa">more content</div>
    

header3

    <div class="classa">another content</div>
</div>
</div> </div>

9
katma

Kodunuzdaki sorun, ilk .classa 'ı gizlemek istediğinizdir, ancak ilk .classa , .content , h3 ilk çocuktur.

Yani : not() sözde sınıfına bir alternatif olarak, nt-of-type (n + 2) 'yi kullanabilirsiniz. Birincisi hariç, aynı tipte tüm elemanları seçecektir.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

div.classa:nth-of-type(n+2) {
    display:none;
}
<div class="content">
    

abc

    <div class="classa">some content</div>
    

xyz

    <div class="classa">more content</div>
    

header3

    <div class="classa">another content</div>
</div>
</div> </div>

7
katma

Böyle yapabilirsin:

<div class="content">
    

abc

    <div class="classa">some content1</div>
    

xyz

    <div class="classa">more content2</div>
    

header3

    <div class="classa">another content3</div>
</div>

css:

.content > .classa:not(:nth-of-type(2)) {
    display:none;
}
2
katma
@biztiger see edit
katma yazar Matjaž Mav, kaynak
Teşekkürler! Ancak bu kod firefox'ta bile çalışmıyor gibi görünüyor - yanlış bir şey mi yapıyorum? jsfiddle.net/32vw04jg
katma yazar biztiger, kaynak

There is new CSS3's :first-of-type for your case: Demo

.content h3, .content div{
    display:none;
}
.content .classa:first-of-type{  
    display : block;
}
1
katma

You can try the :not pseudo class — https://developer.mozilla.org/en-US/docs/Web/CSS/:not

bu cevabı görün

1
katma
Teşekkürler. İe8'i desteklemek için herhangi bir alternatif var mı?
katma yazar biztiger, kaynak
.content > *{ display: none;}
.content > *:first-child{ display: block !important; }
0
katma
küçük bir açıklama daha yararlıdır ..
katma yazar urfusion, kaynak