CSSセレクターおよびコンビネーターのセマンティクス

CSS構文は簡単であり、理解するためにITの博士号を取得する必要はありません。 ただし、これは単語の最も文字通りの意味で論理的ではない数少ない人気のある言語の1つです。 JavaScriptやPHPなどの他のWebプログラミング言語とは異なり、CSSは一般的なロジックを使用して問題を解決しません。 「Xならば、Yを作り、そうでなければZを作る」または「すべてのYを選択し、それらを使ってXを作る」などのアルゴリズムは、CSSなどの言語では実装できません。 簡単に言えば、これは設計のために作成された言語であり、開発者ではなくデザイナーのための言語です。 私がこの理由で働いた経験豊富なプログラマーの中には、CSSをマスターするのに多くの時間を費やした人もいました。



CSSトレーニングは、クラスとID、および使用から始まります。 および＃は、要素を直接示します。 これは完全に機能するWebサイトを構築するには十分ですが、設計が完全に変更された場合の柔軟なソリューションではありません。 これらのアクセスできない要素を管理するための代替アプローチを見てみましょう。

隣の兄弟コンビネーター

困難な状況で便利なセレクターから始めましょう-隣接する兄弟コンビネーターです。 隣接する兄弟コンビネータは、+記号を使用した2つの要素の組み合わせによって示されます。

  h1 + p
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、DOMのh1要素の直後にある次のp要素が強調表示されます。 活版印刷の理論では、テキストの段落にインデントを使用する必要がありますが、それは別の段落に続く場合のみです。 実際には、これを使用して、最初の段落を除くすべての段落をインデントできます。

 p + p { text-indent: 1em; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、class =“ first”で最初の段落を強調表示するよりもはるかに便利です。 3行、クラスなし、完全なブラウザサポート。 サイトの入力に関連するimgタグをpタグ内に配置すると（実際に行う必要があります）、負の-1em値を使用して左マージンを押し戻すことができます。

 p + p img { margin-left: -1em; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

かなり簡単ですね。 しかし、残りのすべての段落を変更せずに、見出しの直後に表示されるすべての段落の最初の行を強調表示したい場合はどうでしょうか？ 繰り返しますが、プレゼンテーションクラスを使用できます。 隣接する複合コンビネータと擬似要素から作成された単純なセレクターが仕事をします：

 h1 + p::first-line { font-variant: small-caps; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：疑似要素：最初の行はCSS 2.1で採用され、表記::はCSS 3で使用され、疑似クラスと疑似要素を区別します。

遺伝的コンビネーター

通常のマークアッププロトコルは、＃pageまたは#wrapの名前付き要素にセクションを配置することです。

 <div id="page"> <header></header> <article> <section id="main"></section> <aside></aside> </article> <footer></footer> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTML 5またはXHTML 1.1構文のどちらを使用するかに関係なく、この基本的な形式はおなじみのはずです。 文書の幅が960pxに固定されており、中央揃えで各要素が水平である場合、CSSは次のようになります。

 #page { width: 960px; margin: 0 auto; } header, article, footer { width: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おそらくあなたはあなたの仕事をより正確にし、トップレベルの要素の望ましくない変更を避けるために、以下を使用します：

 #page header, #page article, #page footer { width: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

より良い方法があります。 私たちはすべてユニバーサルセレクター*に精通しています。 その使用を遺伝的セレクターと組み合わせると、「孫」要素に影響を与えることなく、＃pageの直接の子孫であるすべての要素を選択できます。

 #page > * { width: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

将来、これはドキュメントのトップレベル要素を追加または削除するのに役立ちます。 最初のレイアウトスキームに戻ると、これはヘッダー、記事、およびフッター要素に影響しますが、＃mainおよびarticle要素内の他のすべてには影響しません。

文字列およびサブ文字列属性セレクター

属性セレクターは、最も強力なものの一部です。 CSS 2.1にも存在し、一般に入力[type = "text"]または[href = "＃top"]の形式で使用されていました。 ただし、CSS3は、文字列と部分文字列の形式で、より深いレベルの制御を提供します。



注：これまでのところ、これまで説明してきたことはすべてCSS 2.1標準に関連していますが、現在はCSS3の領域に入っています。



4つの基本的な文字列属性セレクターがあり、「v」=値、「a」=属性です。

vは、スペースで区切られた値のリストの1つです。element[a〜= "v"]

aはvで始まります：要素[a ^ = "v"]

aはvで終わる：element [a $ = "v"]

aには値が含まれます。element [a * = "v"]



行属性セレクターの可能性は事実上無限ですが、アイコンは素晴らしい例です。 ソーシャルネットワーク上のプロファイルへのリンクの順不同リストがあるとしましょう：

 <ul id="social"> <li><a href="http://facebook.com/designfestival">Like on Facebook</a></li> <li><a href="http://twitter.com/designfestival">Follow on Twitter</a></li> <li><a href="http://feeds.feedburner.com/designfestival">RSS</a></li> </ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それらを整理するのは、キーワードを見つけるためにhref属性を介してリクエストを行うのと同じくらい簡単です。 次のように配置できます。

 #social li a::before { content: ''; background: left 50% no-repeat; width: 16px; height: 16px; } #social li a[href*="facebook"]::before { background-image: url(images/icon-facebook.png); } #social li a[href*="twitter"]::before { background-image: url(images/icon-twitter.png); } #social li a[href*="feedburner"]::before { background-image: url(images/icon-feedburner.png); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様に、Suffix属性セレクターを使用してPDFドキュメント内のすべてのリンクを選択できます。

 a[href$=".pdf"]::before { background-image: url(images/icon-pdf.png); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS3の部分文字列属性をサポートしていないブラウザはこれらのアイコンを表示しませんが、これはそれほど重要ではありません-機能がほとんどない、単なる素晴らしい追加です。

構造擬似クラス

最後に、疑似クラスを使用する利点の概要を説明します（疑似要素、リンクおよび状態の疑似クラスと混同しないでください）。 これらを使用して、DOM内の位置によって要素を選択できます。 構造擬似クラスを使用する良い例は、要素ツリーの最初の（または最後の）要素を強調表示するか、偶数要素と奇数要素のいずれかを選択することです。

 <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> <li>List Item 5</li> <li>List Item 6</li> </ul> ul li { border-top: 1px solid #DDD; } ul li:last-child { border-bottom: 1px solid #DDD; } ul li:nth-child(even) { background: #EEE; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：CSS 2.1で使用できる唯一の擬似要素は、first-childです。 last-childを含む他のすべての擬似要素は、CSS3標準です。



ただし、構造擬似要素を使用しない場合を知っておく必要があります。 コンテンツではなく、位置によって要素を強調するためだけに使用する必要があります。 DOM内の場所に関係なく、要素に対してアクションを実行する必要がある場合は、クラス、ID、文字列など、より意味のあるセマンティックセレクターを使用します。



おそらく、上記のコンビネーターとセレクターのいくつかを既に使用しているかもしれません-多分正しいかどうかはわかりませんが、クラスやIDよりも便利な場合の追加のリマインダーは傷つきません。 私たちの最高の人でさえ、そのようなことをしばしば誤解しています。