Articles
แนะนำ CSS
พื้นฐาน CSS

พื้นฐาน CSS

บทความนี้อธิบายพื้นฐานของ CSS

คุณสามารถเรียนรู้เกี่ยวกับตัวเลือก CSS, ตัวรวม (combinators) และเฉพาะการ (specificity)

YouTube Video

HTML/CSS สำหรับการแสดงตัวอย่าง

css-base.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 600px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29    padding-left: 10px;
 30    border-left: 2px solid #ccc;
 31}
 32
 33h4 {
 34    margin: 0;
 35    margin-left: 10px;
 36    font-size: 14px;
 37}
 38
 39article section p {
 40    margin-left:  40px;
 41}
 42
 43p, pre {
 44    margin: 10px 0;
 45    padding: 0;
 46}
 47
 48ul, ol, dl, menu {
 49    margin: 0;
 50}
 51
 52pre {
 53    background-color: #f0f0f0;
 54    border-left: 4px solid #ccc;
 55    padding: 10px;
 56    overflow-x: auto;
 57}
 58
 59.sample-view {
 60    border: 1px solid #eee;
 61    border-left: 4px solid #eee;
 62    padding: 10px;
 63    overflow-x: auto;
 64}
 65
 66p.sample, .sample {
 67    background-color: #e7f4e9;
 68    padding: 10px;
 69    border-left: 4px solid #7bbd82;
 70    color: #333;
 71}
 72
 73p.sample-error, .sample-error {
 74    background-color: #f4e7e7;
 75    padding: 10px;
 76    border-left: 4px solid lightcoral;
 77    color: #333;
 78}
 79
 80.example {
 81    background-color: #e0f0ff;
 82    padding: 10px;
 83    border-left: 4px solid #4a90e2;
 84    color: #333;
 85}
 86
 87p.sample-warn, .sample-warn {
 88    background-color: #f4f1e7;
 89    padding: 10px;
 90    border-left: 4px solid #bda97b;
 91    color: #333;
 92}
 93
 94code {
 95    background-color: #f4f4f4;
 96    padding: 2px 4px;
 97    border-radius: 4px;
 98    font-family: monospace;
 99}
100
101span {
102    font-weight: bold;
103}
104
105article {
106    background-color: white;
107    padding: 20px;
108    margin-bottom: 10px;
109    border-radius: 8px;
110    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114    margin-bottom: 20px;
115}
116
117section div {
118    width: 400px;
119    height: 50px;
120    margin: 20px auto;
121    color: white;
122    display: flex;
123    align-items: center;
124    justify-content: center;
125    font-size: 1.2rem;
126    background-color: lightgray;
127    border: 1px solid #ccc;
128}
129
130header h4 {
131    text-align: right;
132    color: #666;
133    font-size: 0.8em;
134    text-decoration: none;
135}
136
137header + pre {
138    margin: 0;
139    margin-top: -20px;
140    padding-top: 14px;
141    font-size: 0.9em;
142}
143
144header + .sample-view {
145    margin: 0;
146    margin-top: -16px;
147}
148
149.sample-view p {
150    margin: 0;
151    padding: 0;
152}
css-basics.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Basics</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-basics.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Basics</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Selectors</h2></header>
 19        <article>
 20            <h3>Universal Selector : *</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24* {
 25    font-family:'Courier New', Courier, monospace;
 26}
 27</pre>
 28            </section>
 29        </article>
 30        <article>
 31            <h3>Element Selector</h3>
 32            <section>
 33                <header><h4>CSS</h4></header>
 34<pre class="sample">
 35strong {
 36    color: red;
 37}
 38</pre>
 39                <header><h4>HTML</h4></header>
 40                <pre>This is &lt;strong&gt;sample&lt;/strong&gt; text.</pre>
 41                <header><h4>HTML+CSS</h4></header>
 42                <section class="sample-view">
 43                    This is <strong>sample</strong> text.
 44                </section>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>ID Selector : #</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52#example1 {
 53    color: steelblue;
 54}
 55</pre>
 56                <header><h4>HTML</h4></header>
 57                <pre>&lt;span id="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 58                <header><h4>HTML+CSS</h4></header>
 59                <section class="sample-view">
 60                    <span id="example1">This is sample text.</span>
 61                </section>
 62            </section>
 63        </article>
 64        <article>
 65            <h3>Class Selector : .</h3>
 66            <section>
 67                <header><h4>CSS</h4></header>
 68<pre class="sample">
 69.example1 {
 70    background-color: yellow;
 71    font-weight: bold;
 72}
 73</pre>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;span class="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 76                <header><h4>HTML+CSS</h4></header>
 77                <section class="sample-view">
 78                <section>
 79                    <span class="example1">This is sample text.</span>
 80                </section>
 81            </section>
 82        </article>
 83        <article>
 84            <h3>Attribute Selector : [property=value]</h3>
 85            <section>
 86                <header><h4>CSS</h4></header>
 87<pre class="sample">
 88a[href="index.html"] {
 89    font-weight: bold;
 90}
 91</pre>
 92                <header><h4>HTML</h4></header>
 93<pre>
 94&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;br&gt;
 95&lt;a href="about.html"&gt;About&lt;/a&gt;
 96</pre>
 97                <header><h4>HTML+CSS</h4></header>
 98                <section class="sample-view">
 99                    <a href="index.html">Home</a><br>
100                    <a href="about.html">About</a>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>Descendant Combinator</h3>
106            <section>
107                <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110    text-decoration: underline;
111}
112</pre>
113                <header><h4>HTML</h4></header>
114                <pre>&lt;span&gt;This is &lt;strong&gt;sample&lt;/strong&gt; text.&lt;/span&gt;</pre>
115                <header><h4>HTML+CSS</h4></header>
116                <section class="sample-view">
117                    <span>This is <strong>sample</strong> text.</span>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>Child Combinator : &gt;</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127    color: blue;
128}
129</pre>
130                <header><h4>HTML</h4></header>
131<pre>
132This is &lt;em&gt;sample&lt;/em&gt; text.&lt;br&gt;
133&lt;span&gt;This is &lt;em&gt;another&lt;/em&gt; text.&lt;/span&gt;&lt;br&gt;
134&lt;span&gt;This text is not &lt;s&gt;&lt;em&gt;blue&lt;/em&gt;&lt;/s&gt; in color.&lt;/span&gt;
135</pre>
136                <header><h4>HTML+CSS</h4></header>
137                <section class="sample-view">
138                    This is <em>sample</em> text.<br>
139                    <span>This is <em>another</em> text.</span><br>
140                    <span>This text is not <s><em>blue</em></s> in color.</span>
141                </section>
142            </section>
143        </article>
144        <article>
145            <h3> Next Sibling combinator : +</h3>
146            <section>
147                <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150    color: green;
151}
152</pre>
153                <header><h4>HTML</h4></header>
154<pre>
155&lt;span&gt;
156    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
157    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
158    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
159&lt;/span&gt;
160</pre>
161                <header><h4>HTML+CSS</h4></header>
162                <section class="sample-view">
163                    <span>
164                        This is <b>first text</b>.<br>
165                        This is <b>second text</b>.<br>
166                        <i>This</i> is <b>third text</b>.<br>
167                    </span>
168                </section>
169            </section>
170        </article>
171                <article>
172            <h3>Subsequent Sibling Combinator : ~</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177    color: steelblue;
178}
179</pre>
180                <header><h4>HTML</h4></header>
181<pre>
182&lt;span&gt;
183    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
184    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
185    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
186&lt;/span&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <span>
191                        This is <b>first text</b>.<br>
192                        This is <b>second text</b>.<br>
193                        <i>This</i> is <b>third text</b>.<br>
194                    </span>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>Pseudo Class ":" </h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204    background-color: lightskyblue;
205}
206</pre>
207                <header><h4>HTML</h4></header>
208<pre>
209    &lt;a href="#"&gt;Click here&lt;/a&gt;&lt;br&gt;
210</pre>
211                <header><h4>HTML+CSS</h4></header>
212                <section class="sample-view">
213                    <a href="#">Click here</a><br>
214                </section>
215            </section>
216        </article>
217        <article>
218            <h3>Pseudo Element "::" </h3>
219            <section>
220                <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223    content: " ** ";
224    color: red;
225    font-weight: bold;
226}
227</pre>
228                <header><h4>HTML</h4></header>
229<pre>
230    &lt;u&gt;Sample Text&lt;/u&gt;
231</pre>
232                <header><h4>HTML+CSS</h4></header>
233                <section class="sample-view">
234                    <u>Sample Text</u>
235                </section>
236            </section>
237        </article>
238    </main>
239
240    <main>
241        <header><h2>Inheritance &amp; Priority of CSS</h2></header>
242        <article>
243            <h3>CSS Specificity Rule</h3>
244            <section>
245                <header><h4>CSS Specificity</h4></header>
246                <section class="example">
247                <ol>
248                    <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249                    <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251                    <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252                    <li><b>Universal Selector</b>: <code>*</code></li>
253                </ol>
254                </section>
255
256                <header><h4>How Specificity is Calculated</h4></header>
257                <section class="example">
258                <ol>
259                    <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260                    <li><b>ID Selectors</b>: Worth 100 points each.</li>
261                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262                    <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263                </ol>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>Example of CSS Specificity Rule</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274    color: blue;
275}
276
277/* Class Selector */
278.header {
279    color: red;
280}
281
282/* Element Selector */
283h1 {
284    color: green;
285}
286</pre>
287            <header><h4>HTML</h4></header>
288            <pre>&lt;h1 id="header" class="header"&gt;Example of CSS Specificity Rule&lt;/h1&gt;</pre>
289            <header><h4>HTML+CSS</h4></header>
290            <section class="sample-view">
291                <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292            </section>
293        </section>
294    </article>
295    <article>
296        <h3>Using <code>!important</code> in CSS</h3>
297        <section>
298            <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301    color: blue;
302}
303
304.important-header {
305    color: red !important;
306}
307</pre>
308            <header><h4>HTML</h4></header>
309            <pre>&lt;h1 id="important-header" class="important-header"&gt;Example of &lt;code&gt;!important&lt;/code&gt;&lt;/h1&gt;</pre>
310            <header><h4>HTML+CSS</h4></header>
311            <section class="sample-view">
312                <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313            </section>
314        </section>
315    </article>
316    <article>
317        <h3>CSS Inheritance</h3>
318        <section>
319            <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322    color: gray;
323}
324
325p {
326    color: black;
327}
328</pre>
329            <header><h4>HTML</h4></header>
330<pre>
331&lt;footer&gt;
332    &lt;p&gt;This paragraph's text will be black.&lt;/p&gt;
333    &lt;span&gt;This text will be gray.&lt;/span&gt;
334&lt;/footer&gt;
335</pre>
336            <header><h4>HTML+CSS</h4></header>
337            <section class="sample-view">
338                <footer>
339                    <p>This paragraph's text will be black.</p>
340                    <span>This text will be gray.</span>
341                </footer>
342            </section>
343        </section>
344    </article>
345    <article>
346        <h3>Cascading Styles</h3>
347        <section>
348            <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351    color: red;
352}
353
354.text {
355    color: blue;
356}
357</pre>
358            <header><h4>HTML</h4></header>
359            <pre>&lt;p class="text"&gt;This text will be blue.&lt;/p&gt;</pre>
360            <header><h4>HTML+CSS</h4></header>
361            <section class="sample-view">
362                <p class="text">This text will be blue.</p>
363            </section>
364        </section>
365    </article>
366
367</body>
368</html>

ไวยกรณ์พื้นฐาน 

1selector {
2    property: value;
3}

โครงสร้างพื้นฐานของ CSS ประกอบด้วย selector, property, และ value แต่ละคู่ของคุณสมบัติและค่าจะตามด้วยเครื่องหมายอัฒภาค

  • selector กำหนดว่า HTML element ใดที่ style จะถูกนำไปใช้ ในตัวอย่างนี้ สไตล์จะถูกใช้กับทุก <header> องค์ประกอบ
  • property กำหนด property ของ style ที่จะถูกเปลี่ยนแปลง เช่น สีหรือขนาดตัวอักษร Padding และ color คือคุณสมบัติในตัวอย่างนี้
  • value คือค่าที่ถูกกำหนดให้กับ property ตัวอย่างเช่น สำหรับสี อาจเป็น white หรือ #9cf และสำหรับขนาดของ margin อาจเป็น 20px

ตัวเลือก

CSS selectors คือรูปแบบในการเลือก HTML elements โดยการใช้ selectors, คุณสามารถนำ style ไปใช้กับ elements เฉพาะหรือกลุ่มของ elements ได้

ตัวเลือกสากล 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • * เป็น universal selector ที่จะนำไปใช้กับ elements ทั้งหมด
  • ในตัวอย่างนี้ แบบอักษรสำหรับทุกองค์ประกอบจะถูกเปลี่ยน

ตัวเลือกองค์ประกอบ 

1/* Element Selector */
2strong {
3    color: red;
4}
  • ตัวเลือกองค์ประกอบคือ ตัวเลือกที่ใช้กับแท็ก HTML เฉพาะโดยการเขียนชื่อแท็ก HTML นั้น
  • ในตัวอย่างนี้ สีของข้อความในองค์ประกอบ <strong> จะเปลี่ยนเป็นสีแดง

ตัวเลือก ID 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # เป็น ID selector ที่ใช้ในการเลือก elements โดย ID
  • ID มีความเฉพาะตัว ดังนั้นแต่ละหน้าเว็บจะมีได้เพียงหนึ่งองค์ประกอบที่มี ID เดียวกัน

ตัวเลือกคลาส 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . เป็น class selector ที่ใช้ในการเลือก elements โดย class
  • เพิ่มแอตทริบิวต์ class ให้กับองค์ประกอบ HTML เพื่อใช้สไตล์กับองค์ประกอบที่เป็นส่วนหนึ่งของ class นั้น

ตัวเลือกคุณสมบัติ 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] คือตัวเลือกแอตทริบิวต์ที่เลือกองค์ประกอบที่มีแอตทริบิวต์เฉพาะ
  • ในตัวอย่างนี้, ข้อความของ element <a> ที่มีค่า attribute href เป็น index.html จะถูกตั้งค่าให้เป็นตัวหนา

คอมบิเนเตอร์

ตัวรวม (Combinators) ถูกใช้เพื่อรวมตัวเลือกหลายตัวเข้าด้วยกันเพื่อเลือกองค์ประกอบที่มีความสัมพันธ์เฉพาะ ในขณะที่ตัวเลือกเลือกองค์ประกอบเป็นรายตัว ตัวรวม (Combinator) ทำหน้าที่กำหนดความสัมพันธ์โครงสร้างระหว่างองค์ประกอบ

ผู้สืบทอดคอมบิเนเตอร์ 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • ตัวรวมลูกหลาน (Descendant Combinator) ใช้สไตล์กับทุกองค์ประกอบที่กำหนดภายในองค์ประกอบเฉพาะ
  • ในตัวอย่างนี้ เส้นใต้จะถูกใช้กับองค์ประกอบ <strong> ที่อยู่ภายในองค์ประกอบ <span>

ลูกคอมบิเนเตอร์ 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • เครื่องหมาย > ระหว่าง span และ em ถูกใช้เป็นตัวรวมลูก (Child Combinator) ในตัวอย่างนี้ สไตล์ถูกใช้เฉพาะกับองค์ประกอบ <em> ที่เป็นลูกโดยตรงขององค์ประกอบ <span> ในตัวอย่างบรรทัดที่สาม เนื่องจากมีแท็ก <s> ระหว่าง <span> และ <em> สไตล์จะไม่ถูกใช้

คอมบิเนเตอร์พี่น้องที่อยู่ติดกัน 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • adjacent sibling combinator ที่ใช้สัญลักษณ์ + จะนำ style ไปใช้กับองค์ประกอบพี่น้องที่ปรากฎหลังจากองค์ประกอบที่เลือกทันที
  • ในตัวอย่างนี้ สีของข้อความจะเปลี่ยนเป็นสีเขียวก็ต่อเมื่อแท็ก <b> ปรากฏทันทีหลังแท็ก <br>

คอมบิเนเตอร์พี่น้องทั่วไป 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • general sibling combinator ที่ใช้สัญลักษณ์ ~ จะเลือกองค์ประกอบพี่น้องทั้งหมดที่ปรากฎหลังจากองค์ประกอบที่เลือก
  • ในตัวอย่างนี้ สีของข้อความในทุกแท็ก <b> ที่ปรากฏหลัง <br> จะเป็นเฉดสีน้ำเงิน

คลาสเทียม 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • : ใช้สำหรับเลือก pseudo-classes
  • รายละเอียดเกี่ยวกับ pseudo-class จะอธิบายไว้ในบทความอื่น

พรีโดเอเลเมนต์ 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • :: ใช้สำหรับเลือก pseudo-elements
  • รายละเอียดเกี่ยวกับ pseudo-element ก็จะอธิบายไว้ในบทความอื่นเช่นกัน

ความเฉพาะเจาะจงของ CSS

ลำดับความสำคัญใน CSS เป็นสิ่งสำคัญในการเข้าใจการทำงานของ CSS และป้องกันการใช้สไตล์ที่ไม่คาดคิด ลำดับความสำคัญของ CSS กำหนดว่ากฎใดจะมีผลมากที่สุดเมื่อมีกฎ CSS หลายตัวถูกใช้กับองค์ประกอบเดียวกัน ความสำคัญของ CSS ถูกกำหนดหลักๆ โดยปัจจัยต่อไปนี้

  1. สไตล์แบบอินไลน์: สไตล์ที่เขียนไว้โดยตรงภายใน HTML
  2. ตัวเลือก ID ：#id
  3. คลาส, ตัวเลือกแอตทริบิวต์, คลาสสะเปกตรัม ：.class, [attribute=value], :hover, etc
  4. ตัวเลือกองค์ประกอบ ：div, h1, p, etc
  5. ตัวเลือกสากล ：*

ยิ่งอยู่สูงในรายการ ลำดับความสำคัญยิ่งสูง และยิ่งอยู่ต่ำ ลำดับความสำคัญยิ่งต่ำ

วิธีคำนวณความจำเพาะ

ความสำคัญของ CSS ถูกคำนวณโดยการหาค่าถ่วงน้ำหนักของแต่ละตัวเลือก น้ำหนักของแต่ละตัวเลือกแสดงดังนี้

  1. Inline styles: Inline styles มีอิทธิพลมากที่สุดและได้รับความสำคัญสูงสุดเสมอ
  2. ID selectors: ID selector หนึ่งตัวเท่ากับ '100 คะแนน'
  3. Class, attribute selectors, pseudo-classes: เหล่านี้เท่ากับ '10 คะแนน'
  4. Element selectors, pseudo-elements: เท่ากับ '1 คะแนน'

กฎที่มีคะแนนสูงสุดจะถูกใช้

ตัวอย่าง: 

 1/* ID Selector */
 2#header {
 3    color: blue;
 4}
 5
 6/* Class Selector */
 7.header {
 8    color: red;
 9}
10
11/* Element Selector */
12h1 {
13    color: green;
14}
1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>

ที่นี่ แท็ก <h1> มีการนำสไตล์ที่แตกต่างกันสามแบบมาใช้:

  • ตัวเลือกองค์ประกอบ h1 (1 คะแนน)
  • ตัวเลือกคลาส .header (10 คะแนน)
  • ตัวเลือก ID #header (100 คะแนน)

ในกรณีนี้ เนื่องจาก ID selector มีลำดับที่สูงสุด color: blue จึงถูกใช้

การแทนที่ความสำคัญด้วย !important

ใช้ !important หากต้องการบังคับใช้สไตล์และไม่สนใจลำดับที่ทั่วไป !important มีอิทธิพลมากที่สุดต่อกฎทั้งหมด แซงหน้าทุกอย่างอื่น

ตัวอย่าง: 

1#important-header {
2    color: blue;
3}
4
5.important-header {
6    color: red !important;
7}
1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
  • ที่นี่กำหนด color: red !important; ดังนั้น color: red จะมีความสำคัญเป็นอันดับแรก

การสืบทอดและความสำคัญ

CSS มีความสามารถในการสืบทอดสไตล์จากองค์ประกอบพาเรนต์ไปยังองค์ประกอบลูก ตัวอย่างเช่น คุณสมบัติอย่างเช่น color และ font-family จะถูกสืบทอดโดยอัตโนมัติ อย่างไรก็ตาม หากมีการตั้งสไตล์ให้กับองค์ประกอบลูกเฉพาะ สไตล์ที่ถูกใช้ตรงๆ จะมีลำดับสูงกว่าสไตล์ที่สืบทอดมา

ตัวอย่าง: 

1footer {
2    color: gray;
3}
4
5p {
6    color: black;
7}
1<footer>
2    <p>This paragraph's text will be black.</p>
3    <span>This text will be gray.</span>
4</footer>
  • ที่นี่ color: gray; ถูกใช้กับแท็ก footer แต่เนื่องจาก color: black; ถูกกำหนดโดยเฉพาะสำหรับองค์ประกอบ p ข้อความขององค์ประกอบ p จะแสดงเป็นสีดำ ในขณะเดียวกัน องค์ประกอบ span จะรับค่าคุณสมบัติ color จาก footer และปรากฏเป็นสีเทา

การเรียงลำดับและความสำคัญของ CSS

ตามชื่อ 'Cascading Style Sheets (CSS)' บ่งบอกว่า สไตล์จะ 'ซ้อนทับ' หมายความว่าถ้ามีสไตล์ชีทหรือกฎหลายชุด กฎที่กำหนดทีหลังจะมีความสำคัญกว่า หากความสำคัญเท่ากัน สไตล์ที่ถูกเขียนทีหลังจะถูกใช้

ตัวอย่าง: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • ในที่นี้ color: blue; ถูกกำหนดทีหลัง ดังนั้นข้อความจึงแสดงผลเป็นสีน้ำเงิน

สรุป

ความสำคัญของ CSS ถูกกำหนดโดยใช้อัลกอริทึมเช่น specificity แต่ในที่นี้เราได้พิจารณาแค่ส่วนพื้นฐานเท่านั้น

กฎพื้นฐานมีดังนี้:

  • สไตล์ภายใน มีความสำคัญสูงสุดเสมอ
  • ตัวเลือก ID มีความสามารถสูงและมีความสำคัญมากกว่าคลาสและแท็ก
  • ตัวเลือกคลาส และ pseudo-classes มีความสำคัญในระดับปานกลาง
  • ตัวเลือกแท็ก และ pseudo-elements มีความสำคัญในระดับต่ำสุด
  • !important จะลบล้างความสำคัญปกติและบังคับใช้สไตล์นั้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

การสืบทอดใน CSS