CSS

CSSについて学習中。

CSSの基礎知識

・CSSとは？ボックスの考え方・CSSの書き方、セレクタ・スタイル・プロパティ・値・スタイル項目・@ルール
・短縮形の書き方
・input[type=”text”]{}
属性セレクタと呼ばれるもの。inputのどのタイプのやつにCSSをつけるかを決める
複数指定はinput[type=”text”],textarea{},で区切って[]の外に書く
・vhという単位は画面の〇％という意味

その他

・画面の左右にどうしても出来る謎の白い余白を消す方法

CSSのプロパティについて

align-content		×	×	×	〇	auto
align-items		×	×	×	〇	auto
align-self		×	×	×	〇	auto
alignment-baseline		×	×	×	〇	baseline
all		×	×	×	〇	各々
animation		×	×	×	〇	各々
animation-delay		×	×	×	〇	0
animation-direction		×	×	×	〇	normal
animation-duration		×	×	×	〇	0
animation-fill-mode		×	×	×	〇	none
animation-iteration-count		×	×	×	〇	1
animation-name		×	×	×	〇	none
animation-play-state		×	×	×	〇	running
animation-timing-function		×	×	×	〇	ease
appearance		×	×	×	〇	auto
azimuth		×	〇	〇	×	center
backface-visibility		×	×	×	〇	visible
background		〇	〇	〇	〇	各々
background-attachment		〇	〇	〇	〇	scroll
background-blend-mode		×	×	×	〇	normal
background-clip		×	×	×	〇	border-box
background-color 背景色を指定する	#RRGGBB/#RGB 色名 rgb()/rgba() hsl()/hsla() transparent（透明）	〇	〇	〇	〇	transparent
background-image 背景画像を指定する url(⋯)（画像のURL） 複数の背景画像を指定する {background-image: 1つ目の背景画像の値, 2つ目の背景画像の値, ⋯}	none repeat（並べて表示） repeat-x（横方向のみに並べて表示） repeat-y（縦方向のみに並べて表示） no-repeat（繰り返しなし）	〇	〇	〇	〇	none
background-origin		×	×	×	〇	padding-box
background-position		〇	〇	〇	〇	0% 0%
background-repeat 背景画像の繰り返しを指定する		〇	〇	〇	〇	repeat
background-size	covor（ボックス全体を塗りつぶしたいとき） contain（画像全体を表示させたいとき）	×	×	×	〇	auto
baseline-shift		×	×	×	〇	0
binding		×	×	×	〇	none
bleed		×	×	×	〇	6pt
bookmark-label		×	×	×	〇	content()
bookmark-level		×	×	×	〇	none
bookmark-state		×	×	×	〇	open
border すべてのボーダーに関する属性をまとめて指定する		〇	〇	〇	〇	各々
border-bottom 下ボーダーに関する属性をまとめて指定する	solid（１本の線）	〇	〇	〇	〇	各々
border-bottom-color 下ボーダーの色を指定する		×	〇	〇	〇	currentColor
border-bottom-left-radius		×	×	×	〇	0
border-bottom-right-radius		×	×	×	〇	0
border-bottom-style 下ボーダーのスタイルを指定する		×	〇	〇	〇	none
border-bottom-width 下ボーダーの太さを指定する		〇	〇	〇	〇	medium
border-boundary		×	×	×	〇	none
border-collapse テーブル（表）のボーダーの表示モデルを指定する	collapse（線が一本になる・隣接するセルのボーダーを重ねて表示） separate（隣接するセルのボーダーを間隔をあけて表示）	×	〇	〇	〇	separate
border-color ボーダーの色をまとめて指定する	#RRGGBB/#RGB 色名 rgb()/rgba() hsl()/hsla() transparent（透明）	〇	〇	〇	〇	各々
border-image		×	×	×	〇	none
border-image-outset		×	×	×	〇	0
border-image-repeat		×	×	×	〇	stretch
border-image-slice		×	×	×	〇	100%
border-image-source		×	×	×	〇	none
border-image-width		×	×	×	〇	1
border-left 左ボーダーに関する属性をまとめて指定する		〇	〇	〇	〇	depending on individual properties
border-left-color 左ボーダーの色を指定する		×	〇	〇	〇	currentColor
border-left-style 左ボーダーのスタイルを指定する		×	〇	〇	〇	none
border-left-width 左ボーダーの太さを指定する		〇	〇	〇	〇	medium
border-radius		×	×	×	〇	0
border-right 右ボーダーに関する属性をまとめて指定する		〇	〇	〇	〇	depending on individual properties
border-right-color 右のボーダーの色を指定する		×	〇	〇	〇	currentColor
border-right-style 右ボーダーのスタイルを指定する		×	〇	〇	〇	none
border-right-width 右ボーダーの太さを指定する		〇	〇	〇	〇	medium
border-spacing ボーダーとセル内容との間隔を指定	数値+単位	×	〇	〇	〇	0px 0px
border-style	solid（実線） double（二重線） groove（溝線） ridge（稜線） inset（沈みこみ） outset（浮き出し） none（ボーダーなし） hidden（ボーダーを表示しない） dashed（破線） dotted（点線）	〇	〇	〇	〇	depending on individual properties
border-top 上ボーダーに関する属性をまとめて指定する		〇	〇	〇	〇	depending on individual properties
border-top-color 上ボーダーの色を指定する		×	〇	〇	〇	currentColor
border-top-left-radius		×	×	×	〇	0
border-top-right-radius		×	×	×	〇	0
border-top-style 上ボーダーのスタイルを指定する		×	〇	〇	〇	none
border-top-width 上ボーダーの太さを指定する		〇	〇	〇	〇	medium
border-width ボーダーの太さをまとめて指定する	数値+単位 thin（細線） medium（通常の太さの線） thick（太線）	〇	〇	〇	〇	depending on individual properties
bottom 下からの位置を指定	数値+単位 数値+% auto	×	〇	〇	〇	auto
box-decoration-break		×	×	×	〇	slice
box-shadow		×	×	×	〇	none
box-sizing		×	×	×	〇	content-box
box-snap		×	×	×	〇	none
box-suppress		×	×	×	〇	show
break-after		×	×	×	〇	auto
break-before		×	×	×	〇	auto
break-inside		×	×	×	〇	auto
caption-side		×	〇	〇	〇	top
caret		×	×	×	〇	auto
caret-color		×	×	×	〇	auto
caret-shape		×	×	×	〇	auto
chains		×	×	×	〇	none
clear ボックスのフロートを解除	left（左寄せのフロートを解除） right（右寄せのフロートを解除） both（両方解除） none（解除しない）	〇	〇	〇	〇	none
clip		×	〇	〇	×	auto
clip-path		×	×	×	〇	none
clip-rule		×	×	×	〇	nonzero
color 文字色を指定する	#RRGGBB/#RGB 色名 rgb()/rgba() hsl()/hsla() transparent（透明）	〇	〇	〇	〇	implementation-dependent
color-adjust		×	×	×	〇	economy
color-interpolation-filters		×	×	×	〇	auto
column-count		×	×	×	〇	auto
column-fill		×	×	×	〇	balance
column-gap		×	×	×	〇	normal
column-rule		×	×	×	〇	depending on individual properties
column-rule-color		×	×	×	〇	implementation-dependent
column-rule-style		×	×	×	〇	medium
column-rule-width		×	×	×	〇	medium
column-span		×	×	×	〇	none
column-width		×	×	×	〇	auto
columns		×	×	×	〇	depending on individual properties
contain		×	×	×	〇	none
content		×	〇	〇	〇	normal
counter-increment		×	〇	〇	〇	none
counter-reset		×	〇	〇	〇	none
counter-set		×	×	×	〇	none
crop		×	×	×	〇	auto
cue		×	〇	〇	〇	depending on individual properties
cue-after		×	〇	〇	〇	none
cue-before		×	〇	〇	〇	none
cursor		×	〇	〇	〇	auto
direction		×	〇	〇	〇	ltr
display ボックスの表示形式を変更	・flex（メニューなどを横並びにする、フレックスボックス） ・grid（ボックスを分割して並べる、グリッドレイアウト） ・block（ブロックレベル形式にする） ・inline（インライン形式にする） inline-block（インラインブロックレベル形式にする） ・none（存在しないものとして処理される）	〇	〇	〇	〇	inline
display-inside		×	×	×	〇	auto
display-list		×	×	×	〇	none
display-outside		×	×	×	〇	inline-level
dominant-baseline		×	×	×	〇	normal
elevation		×	〇	〇	×	level
empty-cells		×	〇	〇	〇	show
filter		×	×	×	〇	none
flex		×	×	×	〇	各々
flex-basis		×	×	×	〇	auto
flex-direction		×	×	×	〇	row
flex-flow		×	×	×	〇	各々
flex-grow		×	×	×	〇	0
flex-shrink		×	×	×	〇	1
flex-wrap	wrap（入りきれないときに改行：レスポンシブデザイン）	×	×	×	〇	nowrap
float ボックスをフロートさせ、寄せて配置する（後続するボックスは回り込む） 今はほぼdisplay:flexを使用	left（左寄せ） right（右寄せ） none（なし）	〇	〇	〇	〇	none
float-offset		×	×	×	〇	0 0
flood-color		×	×	×	〇	black
flood-opacity		×	×	×	〇	1
flow-from		×	×	×	〇	none
flow-into		×	×	×	〇	none
font フォントに関する属性をまとめて指定		〇	〇	〇	〇	各々
font-family フォントの種類を指定する Adobe・Googleフォントの導入	フォントの正式名称 総称（serif、sans-serif、cursive、fantasy、monospaceなど）	〇	〇	〇	〇	実装依存
font-feature-settings		×	×	×	〇	normal
font-kerning		×	×	×	〇	auto
font-language-override		×	×	×	〇	normal
font-max-size		×	×	×	〇	infinity
font-min-size		×	×	×	〇	0px
font-optical-sizing		×	×	×	〇	auto
font-palette		×	×	×	〇	normal
font-presentation		×	×	×	〇	auto
font-size フォントサイズ（文字のサイズ）を指定	数値+単位 数値+% xx-small x-small small medium large x-large xx-large larger smaller	〇	〇	〇	〇	medium
font-size-adjust		×	〇	×	〇	none
font-stretch		×	〇	×	〇	normal
font-style フォントのスタイルを指定する	normal italic oblique	〇	〇	〇	〇	normal
font-synthesis		×	×	×	〇	weight style
font-variant		〇	〇	〇	〇	normal
font-variant-alternates		×	×	×	〇	normal
font-variant-caps		×	×	×	〇	normal
font-variant-east-asian		×	×	×	〇	normal
font-variant-ligatures		×	×	×	〇	normal
font-variant-numeric		×	×	×	〇	normal
font-variant-position		×	×	×	〇	normal
font-variation-settings		×	×	×	〇	normal
font-weight フォントの太さを指定する	normal bold bolder lighter	〇	〇	〇	〇	normal
gap		×	×	×	〇	各々
grid		×	×	×	〇	各々
grid-area		×	×	×	〇	各々
grid-auto-columns		×	×	×	〇	auto
grid-auto-flow		×	×	×	〇	none
grid-auto-rows		×	×	×	〇	auto
grid-column		×	×	×	〇	各々
grid-column-end		×	×	×	〇	auto
grid-column-start		×	×	×	〇	auto
grid-row		×	×	×	〇	各々
grid-row-end		×	×	×	〇	auto
grid-row-start		×	×	×	〇	auto
grid-template		×	×	×	〇	各々
grid-template-areas		×	×	×	〇	none
grid-template-columns		×	×	×	〇	none
grid-template-rows		×	×	×	〇	none
hanging-punctuation		×	×	×	〇	none
height ボックスの高さを指定	数値+単位 数値＋% auto	〇	〇	〇	〇	auto
hyphens		×	×	×	〇	manual
icon		×	×	×	〇	auto
image-orientation		×	×	×	〇	0deg
image-rendering		×	×	×	〇	auto
image-resolution		×	×	×	〇	1dppx
ime-mode		×	×	×	〇	auto
initial-letters		×	×	×	〇	normal
initial-letters-align		×	×	×	〇	alphabetic
initial-letters-wrap		×	×	×	〇	none
inline-sizing		×	×	×	〇	normal
isolation		×	×	×	〇	auto
justify-content		×	×	×	〇	auto
justify-items		×	×	×	〇	auto
justify-self		×	×	×	〇	auto
left 左からの位置を指定	数値+単位 数値+% auto	×	〇	〇	〇	auto
letter-spacing		〇	〇	〇	〇	normal
lighting-color		×	×	×	〇	white
line-break		×	×	×	〇	auto
line-grid		×	×	×	〇	match-parent
line-height 行の高さを指定する	数値（整数） 数値+単位 数値+% normal	〇	〇	〇	〇	normal
line-snap		×	×	×	〇	none
list-style リストのマーカーに関する属性をまとめて指定する		〇	〇	〇	〇	各々
list-style-image リストのマーカーに画像を指定する	url()（画像のURL） none（なし）	〇	〇	〇	〇	none
list-style-position リストのマーカーの位置を指定する	inside（内側） outside（外側）	〇	〇	〇	〇	outside
list-style-type リストのマーカーの種類を指定する	disc（黒丸） circle（白丸） square（四角） decimal（10進数） none（なし）	〇	〇	〇	〇	disc
margin マージンの幅をまとめて指定する	数値+単位 数値＋% auto	〇	〇	〇	〇	各々
margin-bottom 下マージンの幅を指定する		〇	〇	〇	〇	0
margin-left 左マージンの幅を指定する		〇	〇	〇	〇	0
margin-right 右マージンの幅を指定する		〇	〇	〇	〇	0
margin-top 上マージンの幅を指定する		〇	〇	〇	〇	0
marker-offset		×	〇	×	×	auto
marker-side		×	×	×	〇	list-item
marks		×	〇	×	〇	none
mask		×	×	×	〇	border-box
mask-box		×	×	×	〇	各々
mask-box-outset		×	×	×	〇	0
mask-box-repeat		×	×	×	〇	stretch
mask-box-slice		×	×	×	〇	0 fill
mask-box-source		×	×	×	〇	none
mask-box-width		×	×	×	〇	auto
mask-clip		×	×	×	〇	border-box
mask-image		×	×	×	〇	none
mask-origin		×	×	×	〇	border-box
mask-position		×	×	×	〇	center
mask-repeat		×	×	×	〇	no-repeat
mask-size		×	×	×	〇	border-box
mask-source-type		×	×	×	〇	auto
mask-type		×	×	×	〇	luminance
max-height ボックスの最大の高さを指定する	数値+単位 数値＋% none（なし）	×	〇	〇	〇	none
max-lines		×	×	×	〇	none
max-width ボックスの最大の幅を指定する	数値+単位 数値＋% none（なし）	×	〇	〇	〇	none
min-height ボックスの最小の高さを指定する	数値+単位 数値＋%	×	〇	〇	〇	0
min-width ボックスの最小の幅を指定する	数値+単位 数値＋%	×	〇	〇	〇	0
mix-blend-mode		×	×	×	〇	normal
move-to		×	×	×	〇	normal
nav-down		×	×	×	〇	auto
nav-index		×	×	×	〇	auto
nav-left		×	×	×	〇	auto
nav-right		×	×	×	〇	auto
nav-up		×	×	×	〇	auto
object-fit		×	×	×	〇	fill
object-position		×	×	×	〇	50% 50%
opacity ボックスの透明度を指定する	数値（0～1.0）	×	×	×	〇	1
order		×	×	×	〇	0
orphans		×	〇	〇	〇	2
outline		×	〇	〇	〇	各々
outline-color		×	〇	〇	〇	invert
outline-offset		×	×	×	〇	0
outline-style		×	〇	〇	〇	none
outline-width		×	〇	〇	〇	medium
overflow ボックスの内容あふれの処理方法を指定	visible（高さ、幅の指定を無視してすべて表示） hidden（高さ、幅の指定により範囲内のみ表示） scroll（スクロールバーを表示） auto（ブラウザーの処理に任せる）	×	〇	〇	〇	各々
overflow-wrap		×	×	×	〇	normal
overflow-x ボックスの幅（x軸）の内容あふれの処理方法を指定する	visible（幅の指定を無視してすべて表示） hidden（幅の指定により範囲内のみ表示） scroll（スクロールバーを表示） auto（ブラウザーの処理に任せる）	×	×	×	〇	visible
overflow-y ボックスの高さ（y軸）の内容あふれの処理方法を指定する	visible（高さの指定を無視してすべて表示） hidden（高さの指定により範囲内のみ表示） scroll（スクロールバーを表示） auto（ブラウザーの処理に任せる）	×	×	×	〇	visible
padding パディングの幅をまとめて指定	数値+単位 数値＋%	〇	〇	〇	〇	各々
padding-bottom 下パディングを指定する		〇	〇	〇	〇	0
padding-left 左パディングを指定する		〇	〇	〇	〇	0
padding-right 右パディングを指定する		〇	〇	〇	〇	0
padding-top 上パディングを指定する		〇	〇	〇	〇	0
page		×	〇	×	〇	auto
page-break-after		×	〇	〇	〇	auto
page-break-before		×	〇	〇	〇	auto
page-break-inside		×	〇	〇	〇	auto
page-policy		×	×	×	〇	start
pause		×	〇	〇	〇	実装依存
pause-after		×	〇	〇	〇	実装依存
pause-before		×	〇	〇	〇	実装依存
perspective		×	×	×	〇	none
perspective-origin		×	×	×	〇	50% 50%
pitch		×	〇	〇	×	medium
pitch-range		×	〇	〇	×	50
play-during		×	〇	〇	×	auto
polar-anchor		×	×	×	〇	50% 50%
polar-angle		×	×	×	〇	0
polar-distance		×	×	×	〇	0
polar-origin		×	×	×	〇	auto
position 要素の配置方法を指定	static（指定なし） relative（通常配置される位置からの相対的な位置で指定） absolute（親要素に対して絶対的な位置で指定） fixed（固定配置で指定）	×	〇	〇	〇	static
presentation-level		×	×	×	〇	0
quotes		×	〇	〇	〇	text
region-fragment		×	×	×	〇	auto
resize		×	×	×	〇	none
rest		×	×	×	〇	各々
rest-after		×	×	×	〇	none
rest-before		×	×	×	〇	none
richness		×	〇	〇	×	50
right 右からの位置を指定	数値+単位 数値+% auto	×	〇	〇	〇	auto
row-gap		×	×	×	〇	normal
ruby-align		×	×	×	〇	auto
ruby-merge		×	×	×	〇	separate
ruby-position		×	×	×	〇	before
scroll-padding		×	×	×	〇	0
scroll-padding-block		×	×	×	〇	0
scroll-padding-block-end		×	×	×	〇	0
scroll-padding-block-start		×	×	×	〇	0
scroll-padding-bottom		×	×	×	〇	0
scroll-padding-inline		×	×	×	〇	0
scroll-padding-inline-end		×	×	×	〇	0
scroll-padding-inline-start		×	×	×	〇	0
scroll-padding-left		×	×	×	〇	0
scroll-padding-right		×	×	×	〇	0
scroll-padding-top		×	×	×	〇	0
scroll-snap-align		×	×	×	〇	none
scroll-snap-margin		×	×	×	〇	0
scroll-snap-margin-block		×	×	×	〇	0
scroll-snap-margin-block-end		×	×	×	〇	0
scroll-snap-margin-block-start		×	×	×	〇	0
scroll-snap-margin-bottom		×	×	×	〇	0
scroll-snap-margin-inline		×	×	×	〇	0
scroll-snap-margin-inline-end		×	×	×	〇	0
scroll-snap-margin-inline-start		×	×	×	〇	0
scroll-snap-margin-left		×	×	×	〇	0
scroll-snap-margin-right		×	×	×	〇	0
scroll-snap-margin-top		×	×	×	〇	0
scroll-snap-stop		×	×	×	〇	normal
scroll-snap-type		×	×	×	〇	none
shape-image-threshold		×	×	×	〇	0.0
shape-inside		×	×	×	〇	auto
shape-outside		×	×	×	〇	none
shape-margin		×	×	×	〇	0
size		×	〇	×	〇	auto
speak		×	〇	〇	〇	auto
speak-as		×	×	×	〇	normal
speak-header		×	〇	〇	×	once
speak-numeral		×	〇	〇	×	continuous
speak-punctuation		×	〇	〇	×	none
speech-rate		×	〇	〇	×	medium
stress		×	〇	〇	×	50
string-set		×	×	×	〇	none
tab-size		×	×	×	〇	8
table-layout テーブル（表）のレイアウト方法を指定	auto fixed（列幅を均等）	×	〇	〇	〇	auto
text-align テキストの水平方向位置を指定する	left（左揃え） center（中央揃え） right（右揃え）	〇	〇	〇	〇	start
text-align-last		×	×	×	〇	auto
text-combine-upright		×	×	×	〇	none
text-decoration テキストの文字装飾を指定する	underline（下線） overline（上線） line-through（取り消し線） none（なし）	〇	〇	〇	〇	none
text-decoration-color		×	×	×	〇	currentColor
text-decoration-line		×	×	×	〇	none
text-decoration-skip		×	×	×	〇	objects
text-decoration-style		×	×	×	〇	solid
text-emphasis		×	×	×	〇	各々
text-emphasis-color		×	×	×	〇	currentColor
text-emphasis-position		×	×	×	〇	over right
text-emphasis-style		×	×	×	〇	none
text-indent テキストのインデントを指定する	数値+単位 数値+%	〇	〇	〇	〇	0
text-justify		×	×	×	〇	auto
text-orientation		×	×	×	〇	mixed
text-overflow		×	×	×	〇	clip
text-shadow		×	〇	×	〇	none
text-space-collapse		×	×	×	〇	collapse
text-transform		〇	〇	〇	〇	none
text-underline-position		×	×	×	〇	auto
text-wrap		×	×	×	〇	normal
touch-action		×	×	×	〇	auto
top 上からの位置を指定	数値+単位 数値+% auto	×	〇	〇	〇	auto
transform		×	×	×	〇	none
transform-origin		×	×	×	〇	50% 50% 0
transform-style		×	×	×	〇	flat
transition		×	×	×	〇	各々
transition-delay		×	×	×	〇	0s
transition-duration		×	×	×	〇	0s
transition-property		×	×	×	〇	all
transition-timing-function		×	×	×	〇	ease
unicode-bidi		×	〇	〇	〇	normal
user-select		×	×	×	〇	auto
vertical-align ボックス内のコンテンツの垂直方向位置を指定する	baseline（ベースライン） sub（下付き文字） super（上付き文字） top（上揃え） text-top（テキストを基準とした上揃え） middle（上下中央揃え） bottom（下揃え） text-bottom（テキストを基準とした下揃え） auto	〇	〇	〇	〇	baseline
visibility		×	〇	〇	〇	visible
voice-balance		×	×	×	〇	center
voice-duration		×	×	×	〇	auto
voice-family		×	〇	〇	〇	実装依存
voice-pitch		×	×	×	〇	medium
voice-range		×	×	×	〇	中程度
voice-rate		×	×	×	〇	normal
voice-stress		×	×	×	〇	normal
voice-volume		×	×	×	〇	medium
volume		×	〇	〇	×	medium
white-space		〇	〇	〇	〇	normal
widows		×	〇	〇	〇	2
width ボックスの幅を指定する	数値+単位 数値＋% auto	〇	〇	〇	〇	auto
will-change		×	×	×	〇	auto
word-break		×	×	×	〇	normal
word-spacing		〇	〇	〇	〇	normal
word-wrap		×	×	×	〇	normal
wrap-flow		×	×	×	〇	auto
wrap-through		×	×	×	〇	wrap
writing-mode		×	×	×	〇	horizontal-tb
z-index 重ね合わせの順序を指定	数値（整数） auto	×	×	×	〇	auto

疑似クラス

クラス	詳細
:link	未アクセスであるものを指定する疑似クラス
:visited	アクセス済みであるものを指定する疑似クラス
:hover	マウスでポイントしたオブジェクトを指定する疑似クラス
:focus	カーソルがフォーカスしたものを指定する疑似クラス
:active	マウスのボタンが押されているなど、アクティブなオブジェクトを指定する疑似クラス
:nth-child(値)	連続するすべての要素（ID、クラスなど含む）の最初から数えた個数の中から番号を指定する疑似クラス。 ・値 ・数値 ・○n+△（○ずつ連続する△番目）
:nth-child(アルファベット値)	連続するすべての要素（ID、クラスなど含む）の最初から数えた個数の中から奇数や偶数を指定する疑似クラス ・odd（奇数）　:nth-child(odd),nth-child(2n+1) ・even（偶数） :nth-child(even),nth-child(2n) :nth-child(7)→7 番目の要素を表します。 ・４行目以降→ :nth-child(n+4) nは基本的に0から始まるので、0+4で4行目以降になる
:nth-last-child(値)	連続するすべての要素（ID、クラスなど含む）の最後から数えた個数の中から番号を指定する疑似クラス ・数値 ・○n+△（○ずつ連続する△番目）
:nth-last-child(アルファベット値)	連続するすべての要素（ID、クラスなど含む）の最後から数えた個数の中から奇数や偶数を指定する疑似クラス ・odd（奇数） ・even（偶数）