Help us understand the problem. What is going on with this article?

CSSの属性セレクタの書き方

【概要】

1.属性・セレクタとは何か

2.CSSの属性セレクタの書き方

3.ここから学んだこと

1.属性・セレクタとは何か

属性
タグの中の要素と一緒に含まれており、要素に情報を付け加える役割をもちます。属性に名前がついているものが”属性値”と言われます。

セレクタ
CSSで使う言葉で、どのHTMLの属性に適用するかを示す役割です。

なのでclass属性とclassセレクタの違いは、
class属性は”HTML”、classセレクタは”CSS"を示しています。

<link rel="stylesheet" href="abc.css>

<>:タグ
link:要素
rel,href:属性
stylesheet,abc.css:属性値


2.CSSのセレクタの書き方

では実際に、CSSをHTMLに反映する仕方をここに記載します。意外と知らないやり方もあるかもしれません。


❶-(1)要素に反映する

div{
 color: red;
}
".(ピリオド)"無しで反映できます。



❶-(2)要素の複数に反映する

div.name,div.gender{
 color: red;
}

<div class="name"></div>
<div class="gender"></div>
に反映します。



❷-(1)一部分の名前に反映

.name{
 color: red;
}

"name"がついている属性は全て反映されます。
<div class="A name"></div>
<div class="B name"></div>に適用されます

また
*.name{
 color: red;
}
でも同じ意味になります。



❷-(2)一部分の名前に反映(要素)

前方一致
div[class^="na"]{color: red;}
後方一致(スペース、ハイフンがあっても後方一致の意味であれば反映)
div[class$="me"]{color: red;}
"m"が入っていれば一致(スペース、ハイフンがあっても反映)
div[class*="m"]{color: red;}
"name"が入っていれば一致(スペースがあっても反映、ハイフンがあると反映されない)
div[class~="name"]{color: red;}

属性の場合は、❶や❷-1で行っています。



❷-(3)完全一致(要素)

div[class] {color: red;}
div[class="name"]{color: red;}(スペース、ハイフンがあると反映されない)


<div class="name"></div>
に反映されます。

属性の場合は、❶や❷-1で行っています。



❸両方一致に対して反映or複数の属性にかけたい

.name.gender{
 color: red;
}


or


.name{
 color: red;
}
.gender{
 color: red;
}
であれば、
<div class="name gender"></div>
に反映されます。



.name{
 color: red;
}
.gender{
 color: red;
}

or

.name,gender{
 color: red;
}
であれば
<div class="name"></div>
<div class="gender"></div>
or
<div class="**** name"></div>
<div class="**** gender"></div>
に反映されます。


3.ここから学んだこと

よく".(ドット)"を抜けることがよくありました。
”検証”で反映できていないことを確認し、class名や記述ミスがないかをよく探していました。

taka_no_okapi
『笑謝を、自分らしく、続け、』 #100DaysOfCode #HTML #CSS #Javascript #Ruby 勉強中! プログラムまったくの未経験、0の状態から学習中! みなさんが同じところでつまずいた際に 少しでも共有できればと思い、作りました!
https://twitter.com/taka_no_okapi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした