Css selector with class selection not working

Question

Hi I'm using the following selector to style an element whihc is on the first child of the parent element I select! since the element doesn't have a specific class I use this method. But the style doesn't get added to the element.

.order-bar div[class^='col-']:first-child i[class^='fa-']:before{
    padding: 0px 20px;
    color: #ccc !important;
}

html

<div class='order-bar'>
    <div class="row">
        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
            <i class="fa fa-circle"></i>
        </div>
        <!-- other elements -->
    </div>
</div>

Ram · Accepted Answer · 2015-03-11 04:24:32Z

2

The [class^='fa-'] part is the problem. The class attribute of the i element doesn't start with fa-. Change it to fa or use i.fa:before instead.

answered Mar 11, 2015 at 4:24

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Imesh Chandrasiri Over a year ago

Thank you for your kind help! :) so one questions regarding the selector I wrote. the class part should contain the starting class pattern. As in if the class attrib containes class='fa fa-icon' my selector should start with [class^='fa']

Will Reese Over a year ago

You also need something for the content property in :before to see anything.

Imesh Chandrasiri Over a year ago

@WillReese Yeah there is! Thanks for the headsup but I haven't included the entire css here! :)

Ram Over a year ago

@DimalChandrasiri Yes, but since you can use .fa there is no need to use attribute starts with selector in this case.

Collectives™ on Stack Overflow

Css selector with class selection not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related