Question

I have the following code :

$(".highlight").hover(function(){
                $(this).css("background-color","#E3EBC2");
                },function(){
                $(this).css("background-color","transparent");
                });

I was wondering how I could highlight if the immediate child of this class was a paragraph, and add a border if it was an image

<div class = "highlight>
<p>
some text
</p>
</div>

so the immediate child would be the p (only one level down the tree)

Answer 1

One way is to combine a child selector with a first child filter and then use an is call to see what you get, something like this:

$('.highlight').hover(
    function() {
        var $child = $(this).find('> :first-child');
        if($child.is('p'))
            $child.css("background-color", "#E3EBC2");
        else if($child.is('img'))
            $child.css('border', '3px solid #E3EBC2');
    }, function() {
        var $child = $(this).find('> :first-child');
        if($child.is('p'))
            $child.css("background-color", "transparent");
        else if($child.is('img'))
            $child.css('border', 'none');
    }
);

And a live example: http://jsfiddle.net/ambiguous/kSmXQ/

Or, if you want to play with some CSS:

.highlight.highlighted > p {
    background-color: #E3EBC2;
}
.highlight.highlighted > img {
    border: 3px solid #E3EBC2;
}

And the jQuery to go with that:

$('.highlight > p:first-child, .highlight > img:first-child').parent().hover(
    function() {
        $(this).addClass('highlighted');
    }, function() {
        $(this).removeClass('highlighted');
    }
);

And a live version of this one: http://jsfiddle.net/ambiguous/LPga3/1/

Thanks to Ghostoy for the idea behind this one.

---

And if you want the background color or border change on the <div> rather than the <p> or <img> child:

$('.highlight').hover(
    function() {
        var $this  = $(this);
        var $child = $this.find('> :first-child');
        if($child.is('p'))
            $this.css("background-color", "#E3EBC2");
        else if($child.is('img'))
            $this.css('border', '3px solid #E3EBC2');
    }, function() {
        var $this  = $(this);
        var $child = $this.find('> :first-child');
        if($child.is('p'))
            $this.css("background-color", "transparent");
        else if($child.is('img'))
            $this.css('border', 'none');
    }
);

Live example of this one: http://jsfiddle.net/ambiguous/ufLaW/