もういちどCSS詳細度の話をしよう

D32564792887e3fb5955021f9804c0a6?s=47 Edward Fox
February 07, 2018

 もういちどCSS詳細度の話をしよう

2017/02/07 Repro Media Team LT Session

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

February 07, 2018
Tweet

Transcript

  1. 9.
  2. 12.
  3. 13.
  4. 17.
  5. 19.

    // CSS #foo { color: red; } .bar { color:

    blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> A. ࢲͷઓಆྗ͸530000Ͱ͢ B. ࢲͷઓಆྗ͸530000Ͱ͢
  6. 21.

    A

  7. 22.

    // CSS #foo { color: red; } .bar { color:

    blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> ɾclassΑΓ΋idͷํ͕ৄࡉ౓͸্ ɾ΋͏ͪΐ͍ิ଍ॻ͘
  8. 24.

    // CSS ul li { color: red; } #must-buy {

    color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> A. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ B. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ
  9. 26.

    B

  10. 27.

    // CSS ul li { color: red; } #must-buy {

    color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> ղઆ
  11. 28.
  12. 29.

    // CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list

    li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> A. ͟Θɾɾɾ B. ͟Θɾɾɾ
  13. 31.

    B

  14. 32.

    // CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list

    li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> B. ͟Θɾɾɾ ղઆ
  15. 35.