CODEWITHSUNDEEP
htmlcss
sockittoemjt
sockittoemjt

Reputation: 13

CSS with nested divs applies style to all children

I am trying to style a div nested inside another so that the links in the inner div are black, instead of the outer div's specified style that links are blue. Here's some simplified HTML to demonstrate, and it should be noted that the first div always has the id, and the inner div a class:

#document.blackLinks a,
.blackLinks a {
  color: #000000;
}
#document a {
  color: #0000FF;
}
<head>
  <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
  <div id="document">
    <div class="blackLinks">
      <a href="google.com">Black Link</a>
    </div>
  </div>
</body>

Upvotes: 1

Views: 61

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

Your rule #document.blackLinks a matches the links that are inside an element with id document and (the same element also having) a class of blackLinks.

You need to put a space between them #document .blackLinks a which means, a tags inside an element with class blackLinks which in turn is inside another element with id document

Upvotes: 2

Related Questions