I was wondering if there was a way in CSS to package styles under a specific div to be different. Here is an example of what I would like to accomplish:
<html>
<body>
<div id="enableTheme">
<p>some themed html</p>
</div>
<div id="disableTheme">
<p>some none-themed html</p>
</div>
</body>
</html>
The css would do something like this:
#enableTheme{
p{
css styles
}
label{
different styles
}
div{
even more different styles
}
...
}
where everything under the div that has the id "enableTheme" would be themed the way I want it to be.
Thank you in advance for the help
edit: sorry guys I wasnt very clear in my question. I know about the
#enableTheme p{
//Styles
}
but my problem is I have a hude css file that I dont want to have to add the "#enableTheme" one by one to each element, thats why I was wondering if there was a way to do it globally for a pack of styles that I had premade.
You're pretty much there. Try
#enableTheme p {
/* styles */
}
#enableTheme label {
/* and on and on */
}
Incidentally, if you used SCSS, what you'd written would output exactly the CSS you want for this situation.
Edit: ...but I'd recommend learning more about CSS before getting into Less/Sass/SCSS
Use that syntax:
#enableTheme p{
css styles
}
#enableTheme label{
different styles
}
#enableTheme div{
even more different styles
}
...
(this is probably a duplicate, but anyway)
Yes, this is the Descendant Selector. Just do this:
#enableTheme p
{
css styles
}
#enableTheme label
{
different styles
}
#enableTheme div
{
even more different styles
}
try
#enableTheme p {
}
#enableTheme label {
}
#enableTheme div {
}
or, if they're direct descendants, you may use
#enableTheme > p {
}
#enableTheme > label {
}
#enableTheme > div {
}
In regular CSS no, you can't do that. But you could do something like:
#enableTheme p{
css styles
}
#enableTheme label{
different styles
}
#enableTheme div{
even more different styles
}
Note that there are options, like LESS and SASS, that allow you to do what you proposed.
Related
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
I have this div:
<div dir="ltr"></div>
That is generated automatically via imap_ function, and therefore I am not able to assign any style to it with the style="" tag.
My question is, how can I assign styles to the div above?
An attribute selector works well if you just want to style this specific element:
div[dir="ltr"] {
/* Styles */
}
Have you tried to use CSS for this?
div {
color: #cecece; /* change the color */
}
http://jsfiddle.net/afzaal_ahmad_zeeshan/wxft9/
[dir='ltr'] {
color: #cecece;
}
or with div - div[dir='ltr']
http://jsfiddle.net/aLvZk/
Try this:
CSS:
div[dir='ltr']
{
/*Styles*/
}
Fiddle
i have this css:
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
and i have this html :
<div class='test1'>name</div>
<div class='test2'>desc_name</div>
<div class='test1'>family</div>
<div class='test2'>desc_family</div>
<div class='test1'>password</div>
<div class='test2'>desc_pass</div>
what i have to do is to select the class test1 but only the tags that contains "family" inside the tag and give a background
i need a solution with css only, i dont need to change inside the html
is it possible ?
Thank You
Impossible with pure CSS. You cannot select on elements content with CSS(3 and higher).
The only you can do is specifying some attribute like:
<div class='test1' data-value="family">family</div>
And then select it with CSS:
div.test1[data-value='family'] { /* ... */ }
If you are using anything below CSS3 -
div.test1:contains("family") {
background: *;
}
The :contains() pseudo-class was deprecated in CSS3 - ergo i wouldn't recommend it, nor am I entirely positive any browser completely supports it.. This answer is entirely subjective.
Edit: apparently the :contains() psuedo class works in jQuery (tested in v 1.9).
You can use jQuery to change your styles. (this solution calls for a CSS only solution, but if this is available, use it!)
$("div.test1:contains('family')").css({ background: "whatever" });
you can use multiple class something like this,
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.family {
/* style */
}
and HTML code,
<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>
<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>
I would suggest this one in orther to prevent override
.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.test1.family {
/* style */
}
Okay this is the css code I put on the master page so it applies all the child page as well :
Master.css
a
{
color:Red;
}
a:hover
{
color:Blue;
}
and now on some pages I need to change color and hover color of the links like :
Some child pages
a
{
color:Gray;
}
a:hover
{
color:Maroon;
}
But the problem is it won't change the way I defined later. I used specific id and class approaches but they also don't work.
When I wanna change some specific element style, I use inline style attribute to do it but now :hover comes into play and I don't think I can declare it inline.
CSS chooses between conflicting specifications by how specific the declaration is.
You can increase the specificity by specifying classes, ids, or adding !important to the end of your css declaration. For example:
a:hover
{
color:Maroon;
}
will be overridden by
a.link:hover
{
color:Blue;
}
will be overridden by
#link1:hover
{
color:Red;
}
will be overridden by
a:hover
{
color:Green !important ;
}
I used specific id and class approaches but they also don't work.
Can you clarify?
Using specific selectors is the way to go. An example.
There I define common a look for the whole page.
a {
color:Red;
}
and custom style for specific areas where I want it to apply.
.new-look a {
color: Gray;
}
your HTML markup is equally important.
a { color:red; }
a:hover { color:blue; }
a.foo { color:green; }
a.foo:hover { color:black; }
red
green
will work, unless something else is at play.
or as the other post suggests ~
.foo a { color:red; }
#bar a:hover { color:blue; }
remember IDs take priority over classes.