kokimu
4/21/2017 - 8:49 PM

Target List Items, Descendants


/*最初の要素(親要素から見て、子要素すべての最初)に指定 */
.main-area:first-child {}

/*最後の要素(親要素から見て、子要素すべての最後)に指定 */
.main-area:last-child {}

/*親要素から見て、同じ子要素の中の最初の要素に指定*/
.main-area:first-of-type {}
.main-area:nth-of-type(1) {}

/*親要素から見て、同じ子要素の中の最後の要素に指定*/
.main-area:last-of-type {}


/* .main-area div の中の 全て第一子要素に指定 */
.main-area * {}
/* 最初のリストにのみ指定 */
li:first-child {
	color: #b510a2;
}

/* 最初のリストにのみ指定 */
li:last-child {
	color: #b510a2;
}

/* 奇数リストにのみ指定 */
li:nth-child(odd) {
    color: #b510a2;   
}

/* 偶数リストにのみ指定 */
li:nth-child(even) {
    color: #b510a2;   
}

/* 最初から5番目のリストにのみ指定 */
li:nth-child(5) {
    color: #b510a2;   
}

/* 最後から5番目のリストにのみ指定 */
li:nth-last-child(5) {
    color: #b510a2;
}

/*最初から2番目のリストと、その後に続く4つ目ごとのリストに指定される。(2,6,10,14,18,22……)*/
li:nth-child(4n+2) {
  color: #b510a2;   
}

/* 最初のリストから数えて4番目ごとに指定(最初のリストも指定される。1, 5, 9, ....というふうに指定される。 */
li:nth-child(4n-7) {  /* or 4n+1 */
    color: #b510a2;   
}

/* 最初の5つのリストにのみ指定 */
li:nth-child(-n+5) {
    color: #b510a2;   
}

/* 最初の5つのリストを除く全てに指定(6番目以降の全てに指定 */
li:nth-child(n+6) {
    color: #b510a2;   
}