English
Menu

Web Technology Basics

<style>
  #main p    { color: red; }
  .content p { color: green; }
  p.note     { color: blue; }
</style>
<div id="main" class="content">
  <p class="note">Hello</p>
</div>

Assume there are no other style specifications. In the HTML above, which of the following is the color of the text "Hello"?

  1. ARed
  2. BGreen
  3. CBlue
Show answer and explanation

Answer: A. Red

When several rules apply to the same element, the rule whose selector has the higher specificity wins. Specificity is compared as the tuple (number of IDs, number of classes, attributes and pseudo-classes, number of elements): #main p is (1, 0, 1), while .content p and p.note are both (0, 1, 1), so the red of #main p, which contains an ID, is used. Between rules of equal specificity, the one written later wins. A declaration written directly in the style attribute, or one marked !important, takes precedence over these.

  • A. Correct. #main p, which contains an ID, has the highest specificity, (1, 0, 1).
  • B. The specificity of .content p is (0, 1, 1), lower than the rule containing an ID. It is also written before p.note, which has the same specificity.
  • C. p.note is written last, but its specificity (0, 1, 1) is lower than the rule containing an ID, so it is not used. Without the ID rule, the text would be blue.
Practice this topic Back to topic

Books on Web Technology Basics Ad

As an Amazon Associate I earn from qualifying purchases.

More Web Technology Basics questions

  1. In the processing a browser does before showing the first screen (the critical rendering path), a <script src="app.js"> written without attributes inside <head> makes the HTML parser stop at that point. Which of the following correctly describes the behavior when the defer attribute is added to this element?
  2. When the JavaScript above is run in a browser, which of the following is the order in which the characters are shown on the console?
  3. Under the browser's same-origin policy, which of the following URLs is considered to have the same origin as https://www.example.com/app/index.html?
  4. JavaScript on a page at https://app.example.com uses fetch to send a POST request with a body of Content-Type application/json to https://api.example.net/orders. Which of the following correctly describes how CORS behaves in this case?
  5. Which of the following correctly describes a Service Worker?