CSSセレクタの件

9928 ワード
cssセレクタ cssテクニック css 3 css
MDNリファレンスリンク
CSSセレクタは、CSSルールがどの要素に適用されるかを規定しています.
CSSセレクタは以下の4種類に分けられます.

-基本セレクタ


-コンビネーションセレクタ


-擬似クラス


-擬似要素


きほんセレクタ


Typeセレクタ
エレメントセレクタとも呼ばれ、指定したエレメント名に一致するすべてのエレメントが選択されます.
構文:elename(要素名)elename
例:spanはすべての要素を選択します.
コード:
HTML: 
Here is a span with some text.

Here is a p with some text.

Here is a span with more text.

CSS: 
span {
  color: red;
}

REUSLT:
クラスセレクタ
この基本セレクタは、クラスプロパティの値に基づいて要素を選択します.1つの要素のclass値は、1つ以上(スペースで区切られています).
文法:.クラス名
例:indexはindexクラスを含むすべての要素に一致する(class=「index」のような属性によって定義される).
HTML: 
Here is a span with some text.

Here is a p with some text.

Here is a span with more text.

CSS: 

.index{
  color:red;
}
.text{
  font-size:24px;
}

REUSLT:
次のspanに注意してください.classは2つあるので、2つのclassのスタイルを適用します.
IDセレクタ
この基本セレクタは、id属性が一致するすべての要素を選択します.1つのドキュメント内のidはすべて一意であるべきであることに注意してください.
構文:#idname(id名)
例:#tocは、すべてのid属性がtocである要素(このような定義id="toc")と一致する.
HTML: 
Here is a span with some text.

Here is a p with some text.

CSS: 
#toc{
  color:red;
}

REUSLT:
ユニバーサルセレクタ
この基本セレクタは、すべてのノードを選択します.名詞空間と組み合わせて使用されることも多く、その空間の下のすべての要素を選択するために使用されます.
構文:ns||
例:*(ワイルドカード)はすべての要素を選択します.
HTML: 
Here is a span with some text.

Here is a p with some text.

Here is a span with more text.

CSS: 
* {
  color:red;
}

REUSLT:
属性セレクタ
この基本的なセレクタは、要素のプロパティに基づいて選択されます.
構文:[attr][attr=value][attr~=value][attr|=value][attr^=value][attr$=value][attr*=value]
例:[autoplay]では、autoplayプロパティの値にかかわらず、autoplayプロパティを持つすべての要素が選択されます.
HTML:

CSS: 
li{
  margin-bottom:10px;
}
a {
  color: blue;  
}

/*   href         "#"   は、 のように  されます*/
a[href="#"] {
color: black;
}
/*href  が  し、   が「#」で まる  は、 のように  されます*/
a[href^="#"] {
background-color: gold;
}
/*href  が  し、   に「example」が まれている  は、 のように  されます*/
a[href*="example"] {
background-color: silver;
}
/*href  が  し、   に「insensitive」が まれている  、
iは「insensitive」を  する   と   を し、  のように  */
a[href*="insensitive" i] {
color: cyan;
}
/*href  が  し、   の  が「.org」の  は、 のように  されます*/
a[href$=".org"] {
color: red;
}

RESULT:

コンビネーションセレクタ


兄弟セレクタに隣接
'+'オペレータは、2番目のノードが1番目のノードに隣接し、共通の親ノードを持つ隣接する要素を選択します.構文:A+Bの例:ul+liは、要素の直後の
  • 要素に一致します.
    HTML: 
    

  • 
      

    •   

  •

    • CSS: 
    ul + li{
  color:red;
}

    RESULT:
    一般兄弟セレクタ
    '~'オペレータは、兄弟要素を選択します.すなわち、2番目のノードは、1番目のノードの後ろの任意の位置にあり、この2つのノードの親ノードは同じです.構文:A~B例:p~spanは、同じ親要素の下、要素の後の要素すべてに一致します.
    HTML: 
    

  • 
      

    •   

  •

    • CSS: 
    ul ~ li{
  color:red;
}

    RESULT:
    サブセレクタ
    '>'オペレータは、最初の要素の直接サブノードを選択します.構文:A>Bの例:div>spanは、に直接ネストされた に します.
    HTML:

    CSS: 
    div > span{
  color:red;
}

    RESULT:
    セレクタ
    '''(スペース)オペレータは、 の の ノードを します. :A B :div spanは に します.
    HTML:

    CSS: 
    div span{
  color:red;
}

    RESULT:

    クラス


    クラスでは、ドキュメントツリーに まれていないステータス に づいて を できます.
    セレクタは を む 60 あり,ここでは に く いられる のいくつかを する.
    :link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child()、:nth-last-child()
    :link、:visited、:hover、:active
    HTML: 
    
   
    :active CSSセレクタ 
    
   
     アクセスなし.
    
   
    アクセス.
    
   
    マウスを す.
    
   
    リンクをアクティブにする(マウスをクリックして ち げない  ).

    CSS: 
    a:link { color: blue } /*       */
a:visited { color: purple } /*       */
a:hover { color: red } /*        */
a:active { color: lime } /*      */

    RESULT:
    :focus
    :focusは、フォーム などのフォーカスを する を します.ユーザが をクリックまたはタッチしたり、キーボードの「tab」キーで したりするとトリガーされます.
    HTML:

    CSS: 
    input:focus {
  color: red;
}

    RESULT:
    :first-child、:last-child
    :first-childは、 のセットの の を します.
    :last-childは、 のセットの から の を します.
    HTML: 
      
  
    • Item 1
      • 
  
    • Item 2
      • 
  
    • Item 3
      •

    CSS: 
    ul li:first-child {
  color: red;
}
ul li:last-child {
  color: blue;
}

    RESULT:
    :nth-child()、nth-last-child()
    :nth-child(an+b)このCSS クラスは、まず の のすべての を つけ、 に1からソートします. した はCSS クラスです.nth-childカッコの (an+b)が する の です.
    :nth-last-child(an+b)と:nth-child(an+b)の が
    の :
    tr:nth-child(2n+1)

    HTMLテーブルの を します.
    tr:nth-child(odd)

    HTMLテーブルの を します.
    tr:nth-child(2n)

    HTMLテーブルの を します.
    tr:nth-child(even)

    HTMLテーブルの を します.
    span:nth-child(0n+1)

    サブエレメントの のspanを すエレメントは、first-childセレクタと じです.
    span:nth-child(1)

    を す が1 でspanという のラベルが されています
    span:nth-child(-n+3)

    の3つのサブエレメントのspanエレメントを させます.
    HTML: 
      
  
    • 1
      • 
  
    • 2
      • 
  
    • 3
      • 
  
    • 4
      • 
  
    • 5
      • 
  
    • 6
      • 
  
    • 7
      • 
  
    • 8
      • 
  
    • 9
      • 
  
    • 10
      •

    CSS: 
    /*  nth-child(odd)   */
li:nth-child(2n+1){
  color:red;
}

/*  nth-child(even)   */
li:nth-child(2n){
  color:block;
}

li:nth-child(-n+3){
  font-size:40px;
}

li:nth-child(4){
  background:#aaa;
}

    RESULT:
    :nth-last-childはその とは で、 から されます

    ぎじげんそ


    は、HTMLに まれていないすべてのエンティティを します.
    は を めて 30 ありますが、ここではよく われるものをいくつか します::after(:after)、::before(:before)、::first-letter(:first-letter)、::first-line(:first-line)、::placeholder、::selection
    ::after(:after)、::before(:before)
    HTML: 
        ,   ,     。.

    CSS: 
    q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

    RESULT:
    ::first-letter(:first-letter)、::first-line(:first-line)
    HTML: 
    11111111111111111111222222222222

    CSS: 
    p{
  word-break:break-all;
  width:150px;
}
p::first-letter {  /*   :first   IE8- */
  color: red;   
}
p::first-line {  /*   :first   IE8- */   
  font-size: 40px;
}

    RESULT:
    ::selection、::placeholder
    HTML:

    CSS: 
    p::selection {
  background-color: #ccc;
}
input::placeholder {
  color: red;
}

    RESULT:




    • データのフロントバックグラウンド呼び出し
    asp.Netはauthenticationを構成し、フォームベースの認証を完了する方法