Question

This site is overriding my CSS with its own and I cannot get around it! It has style.css with "text-align: center" in the body.

I have <div id="mydiv"> appended to the body and it’s normally got “text-align: left”. There are <ul>s and <li>s underneath #mydiv and they are inheriting the body’s ‘center’ for some reason. I tried this and it’s still not working.

$('#mydiv').children().css('text-align', 'auto');

How the heck do I reclaim my CSS!?

@Grillz, the HTML looks like this:

<div id="mydiv">
<ul class="container">
    <li rel="folder" class="category"><a href="#">category1</a>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory1</a></li></ul>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory2</a></li></ul>
    </li>
    <li rel="folder" class="category"><a href="#">category2</a>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory3</a></li></ul>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory4</a></li></ul>
    </li>
</ul>

Answer 1

If you want to do it via jQuery, your .children() is only selecting the <ul>, not the <li>… You need to do something like this:

$('#mydiv').children().children().each(function() {
    $(this).css('text-align', 'left');
});

Firstly, its drilling down two levels, down to the <li>. Secondly its using the .each() function to apply the css styling to each child…

EDIT: after seeing your html above, below is probably more appropriate:

$('#mydiv').find("li").each(function() {
    $(this).css('text-align', 'left');
});

This uses the .find() function to find every <li> element inside #myDiv.

Working jsFiddle (with color instead of text-align) here: http://jsfiddle.net/Damien_at_SF/Vabvu/

Hope that helps 🙂