【CSS入門】セレクタの指定方法とその種類、優先度 - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の紹介】

　友人と一緒と企んでいることに関連してCSSの技術が必要になったので
もう一度入門から体系的に学ぼうとおもったのでそのメモ

参考(.インストール)

■セレクタの指定の仕方は３種類

　①要素指定
　　例）hi{}

　②クラス指定
　　例）.hi{}

　③ID指定
　　例）#hi{}

■CSSを書く場所は３種類

　①スタイルタグ

　②インライン

　③外部ファイル

　参考

#test2{
color:pink;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="./test.css"/>
<style>
#test{
color:blue;
}
</style>
</head>
<body>
<h1 style="color:red;">a</h1>
<h1 id="test">b</h1>
<h1 id="test2">c</h1>
</body>
</html>

■セレクタの指定の仕方

　①＊　すべてのセレクタ
　②a,b 複数セレクタの指定
③a b　配下すべてのセレクタ
④a>b　直下のセレクタ

①＊すべてのセレクタ

*{
font-size:100px;
}

②a,b　a,b 複数セレクタの指定

h1,p{
font-size:50px
}

③a b　配下すべてのセレクタ

div .item{
color:red;
}

④a>b　直下のセレクタ

div > .item{
color:red;
}

■CSSの優先度

　後から指定したスタイル＜インラインで記載したスタイル＜詳細度の高いスタイル
（ID指定なのか・class指定なのか・セレクタ指定なのかなど）
　＜!importantを指定（最優先）

　※基本的に外部ファイルに記載することを統一していれば、
　　CSSの優先度を意識しない？

■メモ

　　CSSの知識があった人には当たり前だったかもしれないが、
　　最近はじめたjQueryの勉強になりそう。オブkジェクトを取得するときの
　　セレクタの指定の仕方などで。
　　　あと、jQueryの中身の処理も同時に気になった。
「.css」で取得オブジェクトのsytle属性にアクセスしているのかなーと
　　　まちがっっているかもしれないのであとでしらべます。