The selector div#tt a
specifies that all links (<a>
) within the <div>
with the id tt
should be styled in a particular way -- such as setting a color. For example:
<div id="tt">
<a href="#">Link 1</a>
</div>
<div id="abc">
<a href="#">Link2</a>
</div>
In this scenario, Link 1 would be styled according to div#tt a
, while Link 2 would not.
If Link 2 is placed inside the tt div like so:
<div id="tt">
<a href="#">Link 1</a>
<div id="abc">
<a href="#">Link 2</a>
</div>
</div>
Then Link 2 would inherit the styling of Link 1, defined by the css for div#tt a
. To apply different styling to Link 2, you would need a selector like div#tt div#abc a
.
Refer to this JSFiddle for examples.
EDIT
If you want both links on the same line but styled differently, a <span>
can be used around the second link instead of a <div>
to avoid a line break. Alternatively, adding an id to the second link is another option.
Using a <span>
, the HTML would look like this:
<div id="tt">
<a href="#">Link 1</a>
<span id="abc"><a href="#">Link 2</a></span>
</div>
Then style the second link using div#tt span#abc a
.
Alternatively, add an id to the second link within the div:
<div id="tt">
<a href="#">Link 1</a>
<a href="#" id="two">Link 2</a>
</div>
To style these links differently, use div#tt a
for the general style and div#tt a#two
specifically for the second link.
I have updated the JSFiddle example accordingly.
EDIT 2
As suggested by F. Müller in the comment below, it is recommended to utilize other selectors besides ids, especially when styling multiple links differently. For instance:
<div id="myDiv" class="something">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#" class="secondary">Link 3</a>
<a href="#" class="secondary">Link 4</a>
</div>
The styling approach would be:
div.something a {
/* styling for primary links */
}
div.something a.secondary {
/* styling for secondary links */
}
By adding the class name to a link, such as class="secondary"
, you can easily apply specific styles to additional links. See the updated JSFiddle for demonstration.