Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【CSS3/ セレクタ】コレは汎用性が高そう!

W3Schoolsさんからの引用になります。

まだ、覚えたてなもので(๑≧∀≦)ฅ🌟w

 [via]W3Schools

❶Image Sprite

   - http://www.w3schools.com/css/css_image_sprites.asp

 

 

 

❷:nth- セレクター

CSS3 :nth-child() Selector

CSS3 :nth-of-type() Selector

 

 

selectorexampleexample description
:nth-child(n) p:nth-child(2) {
 background: #ff0000;
}
Specify a background color for every <p> element that is the second child of its parent:
:nth-of-type(n) p:nth-of-type(2) {
 background: #ff0000;
}
Specify a background color for every <p> element that is the second p element of its parent:
W3Schools - Reference / Selector

 

 [翻訳: Kazuma ]

(セレクターの意味は、"多分"あってると思います😅w まだ学習中でして、確実な自信はありません😅でも恐らく下のサンプルを作ってみた限りでは、合っていると思われます🌟🌟(*ฅ•̀ω•́ฅ*)ガオー💦

selectorexampleexample description
:nth-child(n) p:nth-child(2) {
  background: #ff0000;
}
一構造内において、「❶2番目の子要素であり」、且つ「❷それが<p>である」もの全ての背景色を変える
:nth-of-type(n) p:nth-of-type(2) {
  background: #ff0000;
}
一構造内において、「2番目の<p>である」もの全ての背景色を変える

 

 

JS Bin on jsbin.com

 CodropとかTutorialzineとかの秀逸なCSS,Javascriptの「Demo」や「ソースコード」を見て、

   「良いなぁ~、凄いなぁ~ ⁽⁽ ◟(灬 ˊωˋ 灬)◞ ⁾⁾✨✨♪ でも項目多いし、よく分からんセレクターもあるし~…。。((ノ")`ω´(ヾ)ウーンッᵎ💦」

 

 となる事が多かったけれどw 最近少しずつ分かるようになってきた( ・ㅂ・)و ̑̑

 

HTML,CSSの基礎はひと通り把握できてきたから、

   - 「抽象的な記述のセレクターの使い方」

   - 「実際どういうケースで使う事があるのか」

が少しずつ分かってきた感じ( ・ㅂ・)و ̑̑✨♪

 

 

「CSSは動きがないレイアウトのための言語」という最初抱いていたイメージが覆ってきてる。

動きも、CSS "3"の発展のお陰で、ある程度までは表現できるし、SVGという3Dグラフィック描写もできるらしい✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)

 

奥が深いぜよCSS、そしてプログラミング~(´つヮ⊂)✨✨✨✨

 

 

追記 / 「 :nth- 」系セレクタ解説サイト( 日本語 )

 

 - 分かりやすい

   

 

- そういう使い方もあるのか⁉︎💡

 

 

 

 

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️