/// BANGBOO BLOG ///

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

March 1, 2010

CSS Selectors

■* 全称セレクタ
すべての要素
h3 * em { color: red }

■ 子孫セレクタ
孫やそれ以下の要素に対しても有効
h1 em { color: blue }

<h1>携帯電話、<i>特に<em>i-mode</em></i>の爆発的な普及について</h1>
em要素 は青く表示、樹構造内で h1要素 に入れ子になっている em要素 はすべて対象

■> 子セレクタ
ある要素の直接の子供要素だけ
body > p { line-height: 1.3pt }
<body>
<ul>
  <li>
    <p>適用外</p>
  </li>
</ul>
<p>適用</p>
</body>

■+ 隣接セレクタ
兄弟関係の要素、ある要素より前に登場する要素を兄要素、後に登場する要素を弟要素
p + div { margin-top: 0.7em }

<p>段落です。</p>
<div>レイアウトコンテナです。</div>
<div>二つ目のレイアウトコンテナです。</div>
この宣言が適用されるのは、一つ目のdiv要素だけ

■[] 属性セレクタ
そこに書かれた属性を持つ要素にマッチします
p[class] { margin-top: 0.7em }
<p class="tomato>
class属性 がある p要素 にマッチします(この場合class属性値は何でも良い)。

img[align=left] { margin-left: 3em }
align属性 の値が left の img要素 にマッチ

table[class~=favorite] { margin: 0em 3em }
<table class="favorite second under">
class属性値の一覧にfavoriteという値を含むtable要素

span[lang|=en] { font-style: italic }
ハイフン(-)で区切られた属性値のリストに対応したセレクタです
<span lang="en-US">アメリカ英語</span>
<span lang="fr, en">フランス語のような英語のような。</span>

■, セレクタのグループ化
同じ宣言を持つ複数のセレクタをグループ化したもの
h1, h2, h3 { font-family: sans-serif }

■: フィルタ セレクタの状態を表す
:ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしている がルート要素
:root p { color:#FF0000; }

:not(~)は、指定した条件と一致しない要素にスタイルシートを適用するためのセレクタだ
html:not(:target)
html:not(:only-child:only-child) p { color:#FF0000; }
html:not([lang*=""]) p { color:#FF0000; }

:first-child その要素内の初めの子のみ
:last-child その要素内の最後の子のみ
:nth-child() 任意の数字番目の子、oddなら奇数、evenなら偶数番目など
:nth-last-child()

:before その要素の前に何かを追加する
:after その要素の後ろに何かを追加する

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
} /*IE7以外のモダンブラウザ向け*/

■. クラスセレクタ
class属性の値がwarningであるdiv要素にマッチ
DIV.warning { color:#FF0000; }

■# IDセレクタ
一意(ID型)属性の値がmyidであるp要素にマッチ
p#myid { color:#FF0000; }

======================

■疑似要素
セレクターに付与し要素の特定の部分にスタイル付けができる、CSS2文法では:だったがCSS3で::になったものも
疑似要素の例 (::first-letter, ::first-line, ::before, ::after etc.)
疑似クラスの例 (:link, :hover, :visited, ,:active, nth-child(n), nth-of-type(n), :not() etc.)
a::after {
  content: "→";
}

twitter
Hatena
Google Buzz
newsing
Yahoo!
Buzzurl
Technorati
del.icio.us
Choix
Iza!
Livedoor Clip
Facebook
Evernote
 

Posted by funa : 01:29 AM | Web | Comment (0) | Trackback (0)


PhotoGallery


TWITTER
Search

Mobile
QR for cellphone  QR for smart phone
For mobile click here
For smart phone click here
Popular Page
#1Web
#2Hiace 200
#3Gadget
#4The beginning of CSSレイアウト
#5Column
#6Web font test
#7Ora Ora Ora Ora Ora
#8Wifi cam
#9みたらし団子
#10Arcade Controller
#11G Suite
#12PC SPEC 2012.8
#13Javascript
#14REMIX DTM DAW - Acid
#15RSS Radio
#16Optimost
#17通話SIM
#18Attachment
#19Summer time blues
#20Enigma
#21Git
#22Warning!! Page Expired.
#23Speaker
#24Darwinian Theory Of Evolution
#25AV首相
#26htaccess mod_rewite
#27/// BANGBOO BLOG /// From 2016-01-01 To 2016-01-31
#28竹書房
#29F☆ck CSS
#30Automobile Inspection
#31No ID
#32Win7 / Win10 Insco
#33Speaker
#34Arcade Controller
#35Agile
#36G Suite
#37Personal Information Privacy Act
#38Europe
#39Warning!! Page Expired.
#40GoogleMap Moblile
#41CSS Selectors
#42MySQL DB Database
#43Ant
#44☆od damnit
#45Teeth Teeth
#46Itinerary with a eurail pass
#47PHP Developer
#48Affiliate
#49/// BANGBOO BLOG /// From 2019-01-01 To 2019-01-31
#50/// BANGBOO BLOG /// From 2019-09-01 To 2019-09-30
#51/// BANGBOO BLOG /// On 2020-03-01
#52/// BANGBOO BLOG /// On 2020-04-01
#53Windows env tips
#54恐慌からの脱出方法
#55MARUTAI
#56A Rainbow Between Clouds‏
#57ER
#58PDF in cellphone with microSD
#59DJ
#60ICOCA
#61Departures
#62Update your home page
#63CSS Grid
#64恐慌からの脱出方法
#65ハチロクカフェ
#66/// BANGBOO BLOG /// On 2016-03-31
#67/// BANGBOO BLOG /// From 2017-02-01 To 2017-02-28
#68/// BANGBOO BLOG /// From 2019-07-01 To 2019-07-31
#69/// BANGBOO BLOG /// From 2019-10-01 To 2019-10-31
#70/// BANGBOO BLOG /// On 2020-01-21
#71Bike
#72Where Hiphop lives!!
#73The team that always wins
#74Tora Tora Tora
#75Blog Ping
#76無料ストレージ
#77jQuery - write less, do more.
#78Adobe Premire6.0 (Guru R.I.P.)
#79PC SPEC 2007.7
#80Google Sitemap
#81Information privacy & antispam law
#82Wifi security camera with solar panel & small battery
#83Hope get back to normal
#84Vice versa
#85ハイエースのメンテ
#86Camoufla
#87α7Ⅱ
#88Jack up Hiace
#89Fucking tire
#90Big D
#914 Pole Plug
#925-year-old shit
#93Emancipation Proclamation
#94Windows env tips
#95Meritocracy
#96Focus zone
#97Raspberry Pi
#98Mind Control
#99Interview
#100Branding Excellent
Category
Recent Entry
Trackback
Comment
Archive
<     March 2024     >
Sun Mon Tue Wed Thi Fri Sat
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Link