"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 !

Answer 1

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>

Answer 2

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>