CODEWITHSUNDEEP
htmlcss
alex416
alex416

Reputation: 41

How could i make CSS apply to all in a div?

Say

<style>
#id{
 text-align:center;
 color:orange;
}
</style>

<div id="id">
<a href="http://url.url/">Click</a>
</div>

So I would like it to apply color:orange; to the <a> tag, but it does not, how could I do this?

The <a> applys, but color:orange; does not.

Example: Codepen example

Thanks.

Upvotes: 0

Views: 61

Answers (5)

luke
luke

Reputation: 3599

Please use this code if you want to apply styling for both parent and all links inside:

#id, #id a {
  text-align:center;
  color:orange;
}

More specific selector has higher priority (in the example above: #id a) than user agent styles.

To be specific according to the title of your question - you want to apply styles to all elements in a div, thus the rule should look like this:

div * {
  text-align:center;
  color:orange;
}

Upvotes: 1

Sanchit Batra
Sanchit Batra

Reputation: 196

Could this be what you're looking for?

<style>
#id{
 text-align:center;
 color:orange;
}
</style>

<div id="id">
<a id = "id" href="http://url.url/">Click</a>
</div>

Upvotes: 0

Oriol
Oriol

Reputation: 288120

Usually this is not necessary because color is an inherited property. However, links have a color defined by default in the user agent stylesheet, so they don't inherit. You only need to use a more specific selector than that default one.

#id, #id * {
  text-align:center;
  color:orange;
}
<div id="id">
  <a href="http://url.url/">Click</a>
</div>

Upvotes: 2

Adam Libuša
Adam Libuša

Reputation: 735

#id {
  text-align: center;
  color: orange;
}

#id * {
  text-align: inherit;
  color: inherit;
}

Upvotes: 0

Srebnywilkun
Srebnywilkun

Reputation: 7

Add the color to an

a { color:orange; }

Upvotes: 0

Related Questions