media-queries、last-of-type、およびクラス名の組み合わせ

Question

私はユニークなルールセットを使ってアプリケーションを開発しています。
ここ は簡略化されたルールセットです：

• 「メイン・エンティティ」常に表示され
• しか1「メイン・エンティティ」
• 「メイン・エンティティ」で可能ですリスト内の任意の位置
• 大きな画面では、表示可能なエンティティは1つ（メイン1つとレギュラー6つ）でなければなりません。
• 中画面では、4つ以上の表示エンティティ）
• 小さな画面では、2つ以上の表示エンティティ（1つのメインと1つのレギュラー）があります。
• 最後の要素が最初に表示されます。ここで

はCSSです：

.btn-breadcrumb > li.main-entity { 
    display: block; 
    color: red; 
} 
.btn-breadcrumb > li { 
    display: none; 
} 
/* === For phones =================================== */ 
@media (max-width: 767px) { 
    .btn-breadcrumb > li:nth-last-child(-n+1) { 
    display: block; 
    } 
} 
/* === For tablets ================================== */ 
@media (min-width: 768px) and (max-width: 991px) { 
    .btn-breadcrumb > li:nth-last-child(-n+3) { 
    display: block; 
    } 
} 
/* === For desktops ================================== */ 
@media (min-width: 992px) { 
    .btn-breadcrumb > li:nth-last-child(-n+6) { 
    display: block; 
    } 
} 

、ここでいくつかのHTMLです：

<ul class="btn-breadcrumb"> 
    <li>Entity 1</li> 
    <li>Entity 2</li> 
    <li>Entity 3</li> 
    <li>Entity 4</li> 
    <li>Entity 5</li> 
    <li>Entity 6</li> 
    <li class="main-entity">Entity 7</li> 
    <li>Entity 8</li> 
</ul> 

メインエンティティがリストの先頭にある場合は、問題はありません。 See a simple fiddle here。実際に見えるように幅を変更してください。

しかし、メインエンティティが最後の要素の1つである場合、私は1オフになります。See here。

元の実装では、メインエンティティは常に1の位置にあったため、実装は簡単でした。現在、メインエンティティが移動できるという要件では、メインエンティティが画面サイズに応じて表示されるエンティティにあるかどうかを判断する最良の方法がわかりません。私はこれがCSSだけではできないことを知っています（hereのようないくつかの議論を経て、擬似クラスをセレクタに適用できない理由を説明しました）。

jQueryを使用することで、サイズ変更イベントを検出して画面幅を決定し、それに応じて可視要素を設定できます。これはちょうど私のコードに私のメディアのクエリ値をプルする必要が非常に冗長なようです。それは本当にここの唯一の解決策ですか？

Answer 1

次でのJavascriptにメディアクエリを追加することを避けることができます。

はJavaScript

$('.btn-breadcrumb > li:not(.main-entity)').slice(-1).addClass('phone'); 
$('.btn-breadcrumb > li:not(.main-entity)').slice(-3).addClass('tablet'); 
$('.btn-breadcrumb > li:not(.main-entity)').slice(-6).addClass('desktop'); 

CSS

/* === For phones =================================== */ 
@media (max-width: 767px) { 
    .btn-breadcrumb > li.phone { 
    display: block; 
    } 
} 
/* === For tablets ================================== */ 
@media (min-width: 768px) and (max-width: 991px) { 
    .btn-breadcrumb > li.tablet { 
    display: block; 
    } 
} 
/* === For desktops ================================== */ 
@media (min-width: 992px) { 
    .btn-breadcrumb > li.desktop { 
    display: block; 
    } 
} 

HTMLます。このような出力：

<ul class="btn-breadcrumb"> 
<li>Entity 1</li> 
<li class="desktop">Entity 2</li> 
<li class="desktop">Entity 3</li> 
<li class="desktop">Entity 4</li> 
<li class="tablet desktop">Entity 5</li> 
<li class="tablet desktop">Entity 6</li> 
<li class="main-entity">Entity 7</li> 
<li class="phone tablet desktop">Entity 8</li> 
</ul> 

.main-entityクラスを別のリスト項目に移動して遊んでみると、あなたのルールに従うことがわかります。

https://jsfiddle.net/rr5Lcjok/60/