huskycyan

webデザインを中心に学習したことを日記として残しています。

webの授業・CSS3-擬似クラス

webの授業 CSS HTML

擬似セレクター：nth

要素：nth-child(式)（○個目から△おき）

li:nth-child(2n+1)

例nが0の時は1
例nが1の時は3
例nが2の時は5

以下例

nth-child(2n+1)奇数
nth-child(2n)偶数
nth-child(3n)3,6,9,12・・・番目
nth-child(3n+1)1,4,10,13・・・番目
nth-child(5)五番目
nth-child(odd)奇数
nth-child(even)偶数

first-child　子要素の中で最初の要素
last-child　子要素の中で最後の要素


f:id:husky1127:20141121190048j:plain
f:id:husky1127:20141121190043j:plain

<style>
ul{
  list-style-type:none;
  border:#00FFFF 2px solid;
  width:10em;
  padding:5px 20px;
  }
li{
  height:30px;
  line-height:30px;
  font-size:18px;
  border-top:#0FF 2px solid;
  }
li:first-child{
  border:none;/*要素の最初にnone*/
  }
a{
  text-decoration:none;
  padding-left:10px;
  }
a:hover{
  background:url(mark.gif) no-repeat 0 50%;
  }
</style>
</head>

<body>

<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">PRPILE</a></li>
  <li><a href="#">GOODS</a></li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#">INFO</a></li>
</ul>

</body>

<style>
th{
  background:#000000;
  color:#FFF;
  text-align:center;
  }
tr:nth-child(even){/*偶数*/
  background:#EEEEEE;
  }
tr:nth-child(odd){/*奇数*/
  background:#ffffcb;
  }
tr:nth-child(3) td:nth-child(3){/*tr3番目のtd3番目*/
  color:#F00;
  }
tr:nth-child(3n+1){/*3かけるn+1で1，4，7，10，13...番目*/
  color:#0000FF;
  }
</style>
</head>

<body>

<table width="500">
  <tr>
    <th scope="col">日時</th>
    <th scope="col">集合場所</th>
    <th scope="col">集合時間</th>
    <th scope="col">持ち物</th>
  </tr>
  <tr>
    <td>2010年11月12日</td>
    <td>上野</td>
    <td>９時</td>
    <td>筆記用具</td>
  </tr>
  <tr>
    <td>2010年11月17日</td>
    <td>浅草</td>
    <td>11時</td>
    <td>工具</td>
  </tr>
  <tr>
    <td>2010年11月18日</td>
    <td>渋谷</td>
    <td>15時</td>
    <td>筆記用具</td>
  </tr>
  <tr>
    <td> 2010年11月19日</td>
    <td>新宿</td>
    <td>10時</td>
    <td>工具</td>
  </tr>
  <tr>
    <td> 2010年11月20日</td>
    <td>新橋</td>
    <td>14時</td>
    <td>工具</td>
  </tr>
  <tr>
    <td> 2010年11月12日</td>
    <td>上野</td>
    <td>９時</td>
    <td>筆記用具</td>
  </tr>
  <tr>
    <td> 2010年11月17日</td>
    <td>浅草</td>
    <td>11時</td>
    <td> 工具</td>
  </tr>
  <tr>
    <td>2010年11月18日</td>
    <td>渋谷</td>
    <td>15時</td>
    <td> 筆記用具</td>
  </tr>
  <tr>
    <td>2010年11月19日</td>
    <td>新宿</td>
    <td>10時</td>
    <td>工具</td>
  </tr>
  <tr>
    <td>2010年11月20日</td>
    <td>新橋</td>
    <td>14時</td>
    <td>工具</td>
  </tr>
</table>


</body>