March 27, 2012

Changing elements CSS properties based on child element

Question by James Dawson

Possible Duplicate:
Complex CSS selector for parent of active child

This is my markup:

<ol class="wp-paginate">
    <li><span class="title"></span></li>
    <li><span class="page current">1</span></li>
    <li><a href="http://localhost/page/2/" title="2" class="page">2</a></li>
    <li><a href="http://localhost/page/2/" class="next">»</a></li>

And I want to change the background-position property of the li element that has a span child with the class current. In this case, the second list item.

I do consider myself proficient with CSS, but I really cannot think of how to do that. Maybe there isn’t a way, or I’m just having a brain fart.


Answer by Starx

Its nearly impossible with javascript.

Using jQuery

$("li").each(function() {
  if($(this).find("span.current").length > 0) {
    $(this).css("backgroundPostion", "top left");  

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!