CODEWITHSUNDEEP
htmlcssdomcss-selectors
Majid
Majid

Reputation: 491

CSS selector of inner elements

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

Upvotes: 0

Views: 607

Answers (2)

Johannes
Johannes

Reputation: 67798

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.

Upvotes: 1

Zodsmar
Zodsmar

Reputation: 485

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>

Upvotes: 1

Related Questions