Blog

初心者は意外と使っていないかもしれないCSSの指定の仕方

2015.02.17Cat:css3 デザイナー

前回cssの優先順位の記事を書きましたが、今回はcssの指定の仕方です。
本当はこっちを先に書くべきでしたね笑

まずは説明するために必要な用語の説明をさせていただきます。

要素と属性

cssを適用させたいhtmlを説明するうえで「要素」と「属性」を理解する必要があります。
下記の図になります。

css2

htmlのタグで囲んだものが「要素」
そのタグに、href,title,target,id,class等の付属されたものが「属性」
となります。

セレクタ

cssファイルで記述する場合、「要素」を指定する際に用いるのが、セレクタです。

下記の赤い箇所がセレクタになります。

css1

この3つの言葉を元に説明していきたいと思います。
(この言葉が正しいものかどうかは保証できません・・・)

cssの指定方法

本当に基礎的なものは、タイトルに習い省かせて頂きます。

1.連続のセレクタ指定

【css】

【html】

通常のclass指定はこのようになりますが、

【css】

【html】

このように隙間なく記述すると、sampleとsample1の2つのclassが付いている要素に適用されます。

これは僕自身最初は知らなくて、他のサイトのソースを見ていたら発見しました。

次からは、
下記のhtmlソースを元に説明させていただきます。

2.直下の階層の子要素を指定

【css】

これは「サンプルhtml」のcontentsというclassが付いたdivにのみスタイルが適用されます。

3.直後に隣接している要素

【css】

「サンプルhtml」のh1の次のpにのみスタイルが適用されます。

4.要素の後にある要素 ※css3

【css】

「サンプルhtml」のh2の後にあるpにのみスタイルが適用されます。
h2の前のpには適用されません。

5.要素の最初の文字のみに適用

【css】

pの最初の文字のみにスタイルが適用されます。

6.要素の最初の行のみに適用

【css】

pの最初の行のみにスタイルが適用されます。

7.最初の要素のみに適用

【css】

最初のpにのみスタイルが適用されます。

8.最後の要素のみに適用

【css】

最初のpにのみスタイルが適用されます。

9.n番目の要素のみに適用

【css】

2番目のpにのみスタイルが適用されます。

他に以下のような指定の仕方があります。

:nth-child(n) ・・・ n番目の要素に適用
:nth-child(odd) ・・・ 奇数番目の要素に適用
:nth-child(2n+1) ・・・ 奇数番目の要素に適用
:nth-child(even) ・・・ 偶数番目の要素に適用
:nth-child(2n) ・・・ 偶数番目の要素に適用
:nth-child(3n) ・・・ 3,6,9,12…番目の要素に適用
:nth-child(3n+1) ・・・ 1,4,7,10…番目の要素に適用

10.該当しない場合の要素に適用

【css】

.main以外のdivにスタイルが適用されます。

11.xxx[foo]・・・foo属性を持つ要素

title属性を持つaタグにスタイルが適用されます。

12.xxx[foo=”bar”]・・・属性の値にbarを持つ要素

【css】

tittle属性に”タイトル”という値をもつaタグにスタイルが適用されます。

他によく使うのは、
inputの要素の指定です。

input[type=”text”]
input[type=”submit”]
input[type=”button”]
input[type=”reset”]
input[type=”radio”]
input[type=”checkbox”]
input[type=”password”]
input[type=”image”]
input[type=”file”]
等があります。

13.xxx[foo^=”bar”]・・・属性の値がbarで始まる要素 ※css3

【css】

href属性のうち、「http://」で始まる要素にスタイルが適用されます。

14.xxx[foo$=”bar”]・・・属性の値がbarで終わる要素 ※css3

【css】

href属性のうち、「.co.jp」で終わる要素にスタイルが適用されます。

15.xxx[foo*=”bar”]・・・属性の値がbarを含む要素 ※css3

【css】

class属性のうち、「box」という名前が含まれる要素にスタイルが適用されます。

css3もありますが、いろんな指定の仕方が出来るようになってきているので、
htmlがスッキリ書けるようになっていく感じがしますね!

他にもまだまだあります。
詳しくは、下記サイトをご覧ください。

CSS3リファレンス

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ