CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 177

How to figure out what is the right target to put in CSS

I tried my best figuring out how to target that area. I want that ul to not have any bullets or squares and also the font to be black in color.

I tried this css code but it is not working 

.footer-wrapper .section-list > li > a {
    color: #000;
}

For example this is my code..

<section id="footer">
        <div class="footer-wrapper">
            <div class="container-fluid">
            <div class="line"></div>
                <div class="row">
                    <div class="col-sm-4">
                    </div>
                    <div class="col-sm-4">
                         <p class="section-list">
                            <ul>
<!-- I am trying to target this part -->
                            </ul>
                        </p>
                    </div>
                    <div class="col-sm-4 text-center">
                    </div>
                </div>
            </div>
        </div>
    </section>

Upvotes: 0

Views: 187

Answers (4)

Tip-Sy
Tip-Sy

Reputation: 808

To remove the bullets from a list, you need to apply this CSS to ul:

.footer-wrapper .section-list > ul {
    list-style-type: none;
}

Plus, > operator means "direct child", so it cannot be used to select li from your div section-list.

Upvotes: 1

Smeegs
Smeegs

Reputation: 9224

> is for direct descendants, which is probably why you're not seeing anything

the direct descendant of .section-list is a ul not a li, so the style will never be applied.

So remove the > from the css selector and you'll be on the right track

.footer-wrapper .section-list  li  a {
    color: #000;
}

As far as removing the bullet, I recommend reading this little tutorial

http://www.webreference.com/programming/css_style2/index.html

the property you want to target is list-style-type

So, something like this would help.

.footer-wrapper .section-list  li { 
      list-style-type:none; 
      }

Edit: also, keep in mind that the selector you have for color only applies to any anchors inside of a list item. If you want to make any text black, you also need to add the color to the second style that I added in my answer.

Edit 2: You have to change <p> to <div>

p elements auto close with the next blocking element. ul is a blocking element.

Which means, even though you didn't tell it to, the paragraph closes before the unordered element opens, so any style you apply to the paragraph never actually gets to any part of the list.

Changing the paragraph to a div is the best and quickest way to fix it.

You can read more about this behavior in this SO question:Paragraph ignores style because of another nested paragraph

Upvotes: 5

Jorge Sainz
Jorge Sainz

Reputation: 133

If it's just that ul tag, why not an id?

#ul_id > li {
  color: #000;
}

Upvotes: 2

Turnip
Turnip

Reputation: 36702

li is not a direct descendant of .section-list. ul is the direct descendant...

.footer-wrapper .section-list > ul {
    list-style: none;
}

.footer-wrapper .section-list > ul li > a {
    color: #000;
}

Upvotes: 2

Related Questions