liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のセレクタ - 構造擬似クラス（N番タイプ）

CSS3.0 ┗━CSS3.0のセレクタ

E:first-of-type : 同じ型をもつ要素のうち最初の E 要素。E:nth-of-type(1) と等価
E:last-of-type : 同じ型をもつ要素のうち最後の E 要素。E:nth-last-of-type(1) と等価
E:nth-of-type(an+b) : 同じ型をもつ要素のうち n 番目にある E 要素
E:only-of-type : 同じ型をもつ要素が他にない、兄弟になる要素が存在しない E 要素。:first-of-type:last-of-type および :nth-of-type(1):nth-last-of-type(1)　と等価

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> :type </title>
   <style type="text/css">
        span {
            display: block;
            padding: 5px;
        }
        /* 最初のspan */
        span:first-of-type{
            border: 1px solid black;
        }
        /* 最後のspan */
        span:last-of-type {
            background-color: #aaa;
        }
        /* 先頭から2個目のspan */
        span:nth-of-type(2){
            color: #888;
        }
        /* 最後から2個目のspan */
        span:nth-last-of-type(2){
            font-weight: bold; 
        }
    </style>
</head>
<body>
<span>htmlの子要素span1</span>
<span>htmlの子要素span2</span>
<span>htmlの子要素span3</span>
<span>htmlの子要素span4</span>
<span>htmlの子要素span5</span>
<hr/>
<div>
    <span>divの子要素span1</span>
    <span>divの子要素span2</span>
    <span>divの子要素span3</span>
    <span>divの子要素span4</span>
    <span>divの子要素span5</span>
</div>
</html>

f:id:liguofeng29:20160127220043p:plain