CODEWITHSUNDEEP
jqueryhtmlcss
madcowzz
madcowzz

Reputation: 37

jQuery CSS Selector background

I've to do the following simple CSS selector using jQuery , but I can't :

"#test > *"

I've tried in many ways but I just can't do that!

$("#jqt > *")

or 

$('*',$("#jqt")).css()

the last one seemed to work but I realized that it shoudnt!!

How should I do this simple selection to add a very simple CSS property (background-image and font-family)????

Thanks in advance

Upvotes: 3

Views: 352

Answers (3)

Gabe
Gabe

Reputation: 50493

This works, if you're wanting to select immediate children:

$("#jqt > *").css({ 'background-image' : 'url(...)', 'font-family' : 'arial'})

jsFiddle

Upvotes: 0

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41865

I guess you are trying to apply css only on the "direct children" of #jqt.

Here is a trick to avoid your style from being applied to the sub child elements:

HTML:

<div id="jqt">
    <a>link</a>
    <p>paragraph</p>
    <div>div</div>
    <div class="no_inherit">
        <a>sub link</a>
        <p>sub paragraph</p>
        <div>sub div</div>
    </div>
</div>

CSS:

.mystyle {
    background-image: url(img.png);
    font-family: "courier";
}

jQuery:

$('#jqt').children().not(".no_inherit").addClass('mystyle');

If you remove not(".no_inherit"), the CSS is applied to the elements in the elements in #jqt > div, so all elements are styled.

Fiddle here : http://jsfiddle.net/7AM5Z/1/

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

Instead of $("#jqt > *") try $("#jqt").children()

Upvotes: 7

Related Questions