CODEWITHSUNDEEP
css
naota
naota

Reputation: 4718

How to apply multiple CSS selectors to a paticular div?

I'm creating a kind of CMS. In this system, each editor can define their own CSS like below. This style should be applied to their own articles.

<style>
p{
color:blue;text-align:center;
}
a{
color:red;
}
</style>

These styles must be applied to a particular div, in this case id="editors_area".

<body>
    <div id="editors_area">
        ===Styles should be applied only here.===
        Each editors article are displayed in this area.
    </div>
    ===Styles should NOT be applied here.===
</body>

To achieve this, I have a plan to insert #editors_area into editor's CSS, as a descendant selector on serve side like below. 

<style>
#editors_area p{
color:blue;text-align:center;
}
#editors_area a{
color:red;
}
</style>

But I guess there are more simple ways to achieve above requirement.

EDIT I deleted the javascript code. Which was not suited here.

Any idea will be appreciated. Thanks in advance.

Upvotes: 3

Views: 125

Answers (4)

jmervine
jmervine

Reputation: 733

SASS and SCSS give you the ability to do stuff like this (unless I'm totally missing the point of you're question, which is possible as I'm about as far as you get from a front end person).

Something like:

#editors_area
    a 
        color:blue
        text-align:center
    p
        color:red

Depending on what language you're working in, it might be worth checking out. I've seen implementations for Ruby, Python, PHP and Java, although I've only used Ruby's myself.

Upvotes: 3

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50573

If you are finding a way to insert CSS blocks dynamically from jQuery, then you can do as follows:

$('<style type="text/css">
    #editors_area p {
       color:blue;text-align:center;
    }
    #editors_area a {
       color:red;
    }
    </style>').appendTo('head');

Upvotes: 1

Saifuddin Sarker
Saifuddin Sarker

Reputation: 863

you try this

$("#editors_area > *").css("color","blue"); // * may be p or a whatever

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337580

CSS was designed for this, so your first method is the correct one -- not to mention that the jQuery method you have wouldn't work.

You should only use jQuery to change css properties when it is required after page load, and even then you should use addClass() or removeClass() and have those classes defined in your CSS file. This is a better separation of concerns.

Upvotes: 5

Related Questions