"nested" classes and CSS

Question

I'm new in the CSS businness and I'd like to do something i don't even know if it's the right way to do it.

I want to do a "theme selector" for a website with a preview and when you click, the new theme is applied.

Here is something that looks like what I want:

$(document).on('click', '#theme-selector p', function(e) {
    var $target = $(e.target).closest('li');
    if($target.length) {
        var className = $target.attr('class');
        if(className.length) {
            $('#main').removeClass().addClass(className); 
        }
    }
});

#theme-selector li {
    cursor: pointer;
}

/* Blue */

.theme-blue p {
	color: rgba(0, 75, 179, 1);
}

/* Green */

.theme-green p {
	color: rgba(0, 154, 51, 1);
}

/* Orange */

.theme-orange p {
	color: rgba(233, 122, 70, 1);
}

/* Red */

.theme-red p {
	color: rgba(192, 65, 53, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="theme-blue">
    
    <p>Actual design</p>
    
    <h2>Change your theme</h2>
    
    <ul id="theme-selector">
        <li class="theme-blue">
            <p>Preview design - Blue</p>
        </li>  
        <li class="theme-green">
            <p>Preview design - Green</p>
        </li>
        <li class="theme-orange">
            <p>Preview design - Orange</p>
        </li> 
        <li class="theme-red">
            <p>Preview design - Red</p>
        </li> 
    </ul>
    
</div>

The problem is when I apply a new theme, it also applies to previews (try applying the red theme on jsfiddle and you'll see the problem)

Please, tell me if there is a better way to do it or how to correct this ?

Thank you !

You should update your question to include the jQuery tag, and the jQuery code you have in your fiddle should be in your question. — j08691
– j08691, Commented Jan 15, 2015 at 14:04

zessx · Accepted Answer · 2015-01-15 14:07:30Z

You should reuse your id #theme-selector to avoid your .theme-xxx p to override its style.

$(document).on('click', '#theme-selector p', function(e) {
    var $target = $(e.target).closest('li');
    if($target.length) {
        var className = $target.attr('class');
        if(className.length) {
            $('#main').removeClass().addClass(className); 
        }
    }
});

#theme-selector li {
    cursor: pointer;
}

/* Blue */

.theme-blue p,
#theme-selector .theme-blue p {
	color: rgba(0, 75, 179, 1);
}

/* Green */

.theme-green p,
#theme-selector .theme-green p {
	color: rgba(0, 154, 51, 1);
}

/* Orange */

.theme-orange p,
#theme-selector .theme-orange p {
	color: rgba(233, 122, 70, 1);
}

/* Red */

.theme-red p,
#theme-selector .theme-red p {
	color: rgba(192, 65, 53, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="theme-blue">
    
    <p>Actual design</p>
    
    <h2>Change your theme</h2>
    
    <ul id="theme-selector">
        <li class="theme-blue">
            <p>Preview design - Blue</p>
        </li>  
        <li class="theme-green">
            <p>Preview design - Green</p>
        </li>
        <li class="theme-orange">
            <p>Preview design - Orange</p>
        </li> 
        <li class="theme-red">
            <p>Preview design - Red</p>
        </li> 
    </ul>
    
</div>

guymid · Accepted Answer · 2015-01-15 14:18:52Z

You are specifically updating the theme selectors with the new class which is why they change.

You only want to update 'real' content and not the theme selector. In my example http://jsfiddle.net/hgrnuu2x/ we change the class of 'contentContainer' and the CSS is applied to the 'real' content inside that I added, and we leave the CSS of the theme selector alone.

$(document).on('click', '#theme-selector p', function(e) {
    var $target = $(e.target).closest('li');
    if($target.length) {
        var className = $target.attr('class');
        if(className.length) {
            $('#contentContainer').removeClass().addClass(className); 
        }
    }
});

<div id="main" class="theme-blue">

    <p>Actual design</p>

    <h2>Change your theme</h2>

    <ul id="theme-selector">
        <li class="theme-blue">
            <p>Preview design - Blue</p>
        </li>  
        <li class="theme-green">
            <p>Preview design - Green</p>
        </li>
        <li class="theme-orange">
            <p>Preview design - Orange</p>
        </li> 
        <li class="theme-red">
            <p>Preview design - Red</p>
        </li> 
    </ul>

</div>
<div>
    'Real' content below
</div>
<div id="contentContainer" class="theme-blue">
        <ul id="contentList">
        <li>
            <p>Content item 1</p>
        </li>  
        <li>
            <p>Preview design - Green</p>
        </li>
        <li>
            <p>Preview design - Orange</p>
        </li> 
        <li>
            <p>Preview design - Red</p>
        </li> 
    </ul>
</div>

Thank you for your answer, but actually, the color of the p tag inside #main doesn't change.

Collectives™ on Stack Overflow

"nested" classes and CSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related