web-dev-qa-db-ja.com

CSS：後の兄弟が存在する場合にのみ要素を選択します

私のHTML構造では、次のように設定しています。

<body>
   <main>
      <section>
      ...
      </section>

      <aside>
      ...
      </aside>
   </main>
</body>

問題は、すべてのページに<aside>がないことです

<section>を選択してmax-width: 500px;を指定する必要があるのは、<aside>が存在する場合のみです。デフォルトはsection { max-width: 1000px; }です（<aside>がない場合）

セレクタとは異なり、1つのタグの直後に別のタグが続きます ;ユーザー[質問]は常に「B」のスタイルを設定したいと考えています。また、この質問では、ユーザーは（「A」ではなく）「B」を選択したいと考えています。

  • <section>が存在する場合のみ、<aside>をスタイルする必要があります。
  • HTMLの順序を変更できません> _ <
  • CSSのみで実行できますか？
  • どのセレクタが必要ですか、またはどのように設定しますか？
  • CSSでそれができない場合（私はCSSのみです）、どうすればこれを達成できますか？
javascripthtmlcsscss-selectors
19
Omar

きちんとした小さなトリック

_<section>_要素が_<main>_.の唯一の要素であるかどうかを確認するトリックを使用して、必要なことを達成できます他の要素がある場合は機能しません。あなたの場合、それはこのように動作するはずです（ http://jsfiddle.net/Ljm323qb/2/ ）：

_section {
     max-width: 500px;
}
/* The STAR of the show */
section:only-child {
     max-width: 1000px;
}
_

このコードペンに示されているように： http://codepen.io/omarjuvera/pen/ByXGyK?editors=11

兄弟セレクターに関する一般的なもの

要素の直後にある兄弟を選択する_+_セレクターがあります（ https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors ）

そして、以下のすべての兄弟を選択する_~_セレクターがあります（ https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors ）

_<aside>_要素の前に_<section>_要素を配置し、兄弟セレクターを使用することで、これを実現できます。

次に例を示します。 http://jsfiddle.net/Ljm323qb/1/

将来の概要
すぐにこれが可能になります。新しい_:has_疑似クラス（ http://dev.w3.org/csswg/selectors-4/#relational ）
main:has(> aside) > section { ... }のようなものを呼び出すことができますが、残念ながらそれを待つ必要があります:(

19
wawa

クラス_.haveSidebar_をbodyタグにjQueryを使用して切り替え、を作成できますsectionタグの[〜＃〜] css [〜＃〜]は、このクラスがbodyタグに存在するかどうかによって異なります。

[〜＃〜] html [〜＃〜]

_<main>
    <section>
    </section>

    <aside>
    </aside>
</main>
_

[〜＃〜] css [〜＃〜]

_main {
    width:100%;
}
main aside {
    width:300px;
    background:red;
    min-height:300px;
    float:left;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
body.haveSidebar main section {
    width: calc(100% - 300px);
}
_

[〜＃〜] js [〜＃〜]

_var sideBar = $('body > main > aside');
if (sideBar.length > 0) {
    $('body').addClass('haveSidebar');
} else {
    $('body').removeClass('haveSidebar');
}
_

サイドタグ付きのフィドル

サイドタグのないフィドル

更新

_margin-left_プロパティを使用して、calc()を使用しないソリューション

_main aside {
    width:300px;
    background:red;
    min-height:300px;
    position:relative;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
.haveSidebar main section {
    margin-left:301px;
}
_

calc（）なしのフィドル

3
Fares M.

JAVASCRIPTなし

HTML要素の順序を次のように変更できる場合：

<body>
   <main>
      <aside>
      ...
      </aside>

      <section>
      ...
      </section>
   </main>
</body>

兄弟セレクターを使用して、次のように行うことができます。

aside ~ section {
    max-width: 500px;
}
3
deowk

これは最も簡単な方法ではありませんが、ドキュメント対応のJavaScript関数を実行して、サイドタグが存在するかどうかを確認し、それに応じてインラインCSSをセクションタグに挿入できます。

1
Matju

JavaScriptでこれを達成するのはかなり簡単です。

たとえば、これは動作します：

<script>
    window.onload = function() {
        if (document.getElementsByTagName('aside')[0]) {
           document.getElementsByTagName('section')[0].style.max-width = '500px';
        } else {
            document.getElementsByTagName('section')[0].style.max-width = '1000px';
        }
    }
</script>
1
Sam Redway

これを試してください、それはいくつかのjavascriptでしかできないと思います。

if ($('main').find('aside').length>0)
{
    $('main').find('section').addClass('specificSection');
}
1
COLD TOLD

CSSには隣接する兄弟セレクタがあります： http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

section + aside { ... }

これは、IE8 +を含むすべての最新のブラウザーでサポートされています。注意してください。セクションと側面がドキュメントツリーで同じ親を共有し、セクションがすぐにある場合、セレクターは一致しますが先行します。さておき

これでうまくいかない場合は、jQueryでJavaScriptを試すことができます。

if($('aside').length)) $('section').addClass('specificSection');

そして、すべてのスタイルをクラス '.specificSeciton'に追加します。

0
alexeiTruhin

Aside要素をセクション1の前に置く可能性がある場合は、 隣接する兄弟セレクター を使用できます。

aside + section{ max-width: 500px }
0
Gael

JQueryを使用して、次のようなことを試すことができます。

if($('aside')) $('section').css('max-width','500px');

CSSのみを使用して、余白が含まれているページのタイプに異なるスタイルを設定し、どういうわけかそれらのページにそのスタイルのみを含めることができます。そのスタイルを独自の小さなスタイルシートに入れ、必要な場所に含めることができます。これは、ページをレンダリングしてからJavaScriptを使用して変更するよりも、おそらくよりクリーンな方法です。

0
Eamonn Gormley