Hitting a css class inside an element with another css class

Question

Hey guys I'm having trouble with hitting some elements with css. I have many divs within divs and I am trying to target the elements so I can style them with my css. Here's my html:

<html class="ng-scope">
<body ng-controller="appController" class="ng-scope">
<div class="header ng-isolate-scope" logo="appModel.config.logoUrl" header-one="appModel.config.headerLabelOne" header-two="appModel.config.headerLabelTwo">
<div class="header-top"></div>
<div class="header-bottom"></div>
<img class="logo" ng-src="assets/images/logo.png" src="assets/images/logo.png"><div class="header-one ng-binding">WHAT PEOPLE ARE SAYING:</div><div class="header-two ng-binding">Loreal - Share Of Buzz</div>
<img class="powered-by" src="assets/images/poweredby.png"></div>
<!-- ngView:  -->
<div class="view-container ng-scope" ng-view="">
<div class="mentions ng-scope">

<!-- Modal -->
<div class="modal fade ng-scope" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div class="mention-detail" style="width: 338px; height: 104px;">
                    <div class="social-logo instagram-account"></div>
                    <div class="detail-image hidden" style="background-image: url('')"></div>
                    <div class="profile-info" style="left: 40px">
                        <div class="user-info">
                            <div class="profile-picture" style="background-image: url('http://scontent.cdninstagram.com/t51.2885-19/s150x150/13636101688972106_a.jpg')"></div>
                            <div>
                                <div class="name">Perfjrine Dlpt</div>
                                <div class="handle">@perfjrine.dpt</div></div>
                            </div>
                            <div class="tweet-stats">
                                <span class="rank stat">SYNTHESIORANK</span>
                                <span class="synth-value value" "="">1.9</span>
                            </div>
                            <div class="tweet">
                                <div class="tweet-inner">La douceur d'avène adoptée #avène #douceur</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/bootstrap/js/modal.js" class="ng-scope"></script>
</div>

The class I am trying to reach with css is the user's name as follows:

.modal-body .mention-detail .profile-info .user-info .name {
  color: #444444;
  margin-top: 4px;
}

Anyone know why my approach is not working? Any help would be nice. thanks!

How do you know that the selector is the problem? You do realize that the order in which CSS rules appear is important, right? — enhzflep, Aug 22 '16 at 19:40
@enhzflep If you mean having css rules of `.modal-body`, then `.modal-body .mention-detail` etc., then yes I have that order already — amigo21, Aug 22 '16 at 19:44
It's working on my side!!! there is something else on your css file!! — Nalin Aggarwal, Aug 22 '16 at 19:44
As a continuation on what @enhzflep said, it could be a CSS specificity problem. Each selector's specificity will dictate whether that rule is applied to the given CSS or note. The rule with the highest specificity will overwrite the same properties of rules with lower specificity. According the the [specificity calculator](https://specificity.keegan.st/), that selector's value is `0050`. You'll need to use your browser's console to see which rule is being applied. Once found, correct the desired rule to have a higher specificity. — War10ck, Aug 22 '16 at 19:47
The selector is fine, you probably have another selector to the same element that overrules this one. — pol, Aug 22 '16 at 19:47
I created a fiddle for it. https://jsfiddle.net/68q3Ltgc/ looks fine — Nalin Aggarwal, Aug 22 '16 at 19:48
@pol - +1 - that's what I was hinting at. The rule that appears last is the one that's applied last. Changing the order of the rules (not the class-names in the selector) can change the resultant display. — enhzflep, Aug 22 '16 at 19:51

score 1 · Answer 1 · answered Aug 22 '16 at 19:47

Your selector is working for me and changing the .name correctly.

One modification I had to do was adding in the CSS:

<head>
    <link rel="stylesheet" href="test.css">
</head>

after the html tag.

If that doesn't work, maybe another rule is taking priority?

score 1 · Accepted Answer · answered Aug 22 '16 at 19:47

So your CSS looks like it should be right (though try not to nest more than 4 selectors within one another). You could have another conflicting style determination further down the CSS page (a good reason to use class names more specific than "name" — there's a high likelihood of a conflicting style name).

Try inspecting the element in Chrome Developer Tools — it'll show CSS rules in reverse order (so things that are lowest on your styleguide are highest in Chrome). You'll see how the styles are overwritten.

Also, avoid doing inline styling — it's often much easier to edit the CSS than the HTML after a site is live or gets incorporated into other systems. It's always best practice to keep your styles in your stylesheet.

If you'd like me to take a further look, put all the code you've got into a new pen on http://codepen.io/ — Kate Miller, Aug 22 '16 at 19:57
thanks Kate, I have it working now. I used the chrome dev tools to see if it's hitting or not. It only seems to be hitting if I put the code in my .css file. I've been modifying the .less file before and I guess it wasn't compiled/reflected properly somehow. Thanks! — amigo21, Aug 22 '16 at 20:15

Hitting a css class inside an element with another css class

2 Answers2