なぜ：only-of-typeは別のHTMLタグを必要としますか？

Question

問題：グリッドはカードで構成されています。すべてのカードが同じ幅であるわけではありません。いくつかのカードは1/4で、他のカードは3/4の幅です。グリッドは常に整数になる必要があります。場合によっては、3/4幅のカードが横に並んでいることがあります。

ソリューション：：CSSの数量クエリに触発されています。3/4カードの幅を1行以上にすると1/2に変更したいと考えています。 this article from A List Partを参照すると、私は適切な擬似クラスを見つけました：これを達成するための唯一のタイプ。

しかし、すべてのHTMLタグが同じである場合ようだ：のみ-の型擬似セレクターあなたはそれが必要だと思うどのように動作しません。

Code pen example

// The money style 
 
.pinned:not(:only-of-type) { 
 
    width: 50%; 
 
} 
 
// EXTRA STUFF // 
 
/* Basic Card */ 
 
.panel { 
 
    color: rgb(51, 51, 51); 
 
    background-color: rgb(245, 245, 245); 
 
    border-color: rgb(221, 221, 221); 
 
    font-size: 16px; 
 
    padding: 10px 15px; 
 
} 
 
/* Featured Card */ 
 
.pinned { 
 
    .panel { 
 
    border-color: rgb(51, 122, 183); 
 
    background-color: rgb(51, 122, 183); 
 
    color: rgb(255, 255, 255); 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<article class="container-fluid"> 
 
    <h2>Same HTML Tag</h2> 
 
    <section class="row"> 
 
    <div class="pinned col-xs-9"> 
 
     <div class="panel">Featured Card</div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="panel">Basic Card</div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="panel">Basic Card</div> 
 
    </div> 
 
    </section> 
 
</article> 
 
<article class="container-fluid"> 
 
    <h2>Differnt HTML Tags</h2> 
 
    <section class="row"> 
 
    <aside class="pinned col-xs-9"> 
 
     <div class="panel">Featured Card</div> 
 
    </aside> 
 
    <div class="col-xs-3"> 
 
     <div class="panel">Basic Card</div> 
 
    </div> 
 
    </section> 
 
</article>

これは、ターゲットとしてクラス名を受け入れますが、ブラウザが異なるようにHTMLタグを必要としていました。これは意図された動作ですか？他の擬似セレクタはクラス名よりもマークアップに依存していますか？

Answer 1

すべて正常に動作しています。平易な英語で

.pinned:not(:only-of-type) { 
    width: 50%; 
} 

：

• :only-of-type疑似クラスは、同じ要素型のない兄弟を有さない要素を選択

  これは、セレクタと宣言があります。

• しかし、あなたは、この（:not()）
• の反対は、したがって、セレクタは、同じ要素型の兄弟を持つクラス.pinnedを持つ要素を目標としている。したいです

最初の例では、divは.pinnedクラスです。このdivには2つの兄弟divがあります。これはマッチです。要素はwidth: 50%になります。 2番目の例では

<section class="row"> 
    <div class="pinned col-xs-9"> 
     <div class="panel">Featured Card</div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel">Basic Card</div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel">Basic Card</div> 
    </div> 
</section> 

、aside要素は.pinnedクラスがあります。他の兄弟はasideです（:only-of-typeです）。マッチはありません。 width: 50%は無視されます。

<section class="row"> 
    <aside class="pinned col-xs-9"> 
    <div class="panel">Featured Card</div> 
    </aside> 
    <div class="col-xs-3"> 
    <div class="panel">Basic Card</div> 
    </div> 
</section>