新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【CSS入門】セレクタの指定方法とその種類、優先度

【今回の紹介】


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


参考(.インストール)

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


 ①要素指定
  例)hi{}

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

 ③ID指定
  例)#hi{}

CSSを書く場所は3種類

 ①スタイルタグ

 ②インライン

 ③外部ファイル


 参考

#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属性にアクセスしているのかなーと
   まちがっっているかもしれないのであとでしらべます。

   

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }