javascript - Cannot override the CSS at this site -
this site overriding css own , cannot around it! has style.css "text-align: center"
in body.
i have <div id="mydiv">
appended body , it's got "text-align: left". there <ul>
s , <li>
s underneath #mydiv , inheriting body's 'center' reason. tried , it's still not working.
$('#mydiv').children().css('text-align', 'auto');
how heck reclaim css!?
@grillz, html looks 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>
if want via jquery, .children()
selecting <ul>
, not <li>
... need this:
$('#mydiv').children().children().each(function() { $(this).css('text-align', 'left'); });
firstly, drilling down 2 levels, down <li>
. secondly using .each()
function apply css styling each child...
edit: after seeing html above, below more appropriate:
$('#mydiv').find("li").each(function() { $(this).css('text-align', 'left'); });
this uses .find()
function find every <li>
element inside #mydiv
.
working jsfiddle (with color instead of text-align) here: http://jsfiddle.net/damien_at_sf/vabvu/
hope helps :)
Comments
Post a Comment