CSS selector of inner elements - html

Question

I'm want to select the words "Dashboard", "Attendance", "Marcum" and "Results" and set their color to White.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
I tried to do it by :
div a[role="button"] {
color: white;
}
However, since I have other elements with role "Button", they are all changed to white which is undesirable in my case. I only need to target these four words. Is it possible? Any help is appreciated in advance.
Thanks

Answer 1

Use the parent elements in the selector to be more specific:
.fpstartwrap > .fpstart > .iconset > div.btn.btn-secondary a[role="button"] {
color: white;
}
Or simply apply a class to those buttons which you only use for these four buttons and use that class in your selector.

Answer 2

To get a CSS selector to only act on a button inside a div use > this tells CSS to get all elements that have a parent div and role=button:
div > a[role="button"] {
color: white;
}
if you really need to be specific then you can even just add a special class to the buttons you wanna act on like
<a class="whiteButton" role="button" href="https://rafiee.net/attendance" title="Attendance" alt="Attendance" target="_blank">
Then for the CSS you can do
.whiteButton {
}
or if only whiteButton inside of div's
div > .whiteButton {
}
or even
div > a > .whiteButton {
}
div > a[role="button"]{
color: white;
background: blue;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>