I have a id based CSS file where I noticed I'm mostly repeating myself. What I'd like to do is specify that an item with an id follows a certain class + some other rules. For example: I'd like id id1 to have all the properties of class LinkButton applied as well as the value back-color: green. Is there a way to do this in the css file? Is there a better way to do what I'm looking at?
You can specify multiple selectors on a given set of properties, like this:
.LinkButton , #id1 { color: red; border: solid 1px blue; } /* Both get these */
#id1 { back-color: green; } /* Adding rules */
It can also override any of the properties if you need:
.LinkButton , #id1 { color: red; back-color: red; } /* Both get these */
#id1 { back-color: green; } /* Changing rules */
Or you give the element the class and ID:
<div id="id1" class="LinkButton ">
There's no need to work with ID based style sheets. Avoiding repetition is exactly what classes are there for. Why not use classes instead of IDs? They are much more flexible, and take away nothing. (You can still target speficic elements.)
You can combine multiple CSS classes wonderfully (except for IE6, whose interpretation of multiple classes is broken.)
<span class="info extrabig highlight"> Important hint </span>
if you have a particular element that needs really specific rules, then give it a class named after its ID:
<span id="really_special" class="id_really_special info extrabig highlight">
and define the unique properties of the element in the .id_really_special class.
IDs are there to access elements through the DOM imo. Styling should really be left to classes.
Related
We're developing a large plugin based front-end system and trying to figure out how to compose CSS rules. Basically there are two ways:
Specify parents in the class name
Specify parents in the selector (by using LESS nested rules)
And the corresponding HTML:
<div class="dashboard">
<span class="dashboard__title"></span>
<div class="custom-widget">
<span class="dashboard__custom-widget__title"></span>
</div>
</div>
And for second approach:
<div class="dashboard">
<span class="title"></span>
<div class="custom-widget">
<span class="title"></span>
</div>
</div>
I want to specify specific style for .title inside .dashboard, so using the first approach CSS will look like that:
.dashboard__title {
//styles here
}
With the second approach CSS will look like this:
.dashboard .title {
//styles here
}
which takes advantage of LESS nesting capabilities:
.dashboard {
.title {
//styles here
}
}
We really like the second approach as it makes LESS stylesheets easy to read by collapsing rules specific to any particular element and it also allows for short style names. However, it has a problem, which is cascading - in the case at hand styles defined for .title inside .dashboard will also be applied for .title inside .custom-widget. If we use the first approach the doesn't happen.
Please advice on ways to use LESS nesting capabilities but avoid the problem described.
EDIT:
It seems that I've found a solution which combines two approaches:
.custom-widget {
&__save-icon {
&--active {
padding: 777px;
background-image : url('');
}
}
}
Produces this kind of class:
.custom-widget__save-icon--active
Just choose your element by selector like below:
This style affects only for immediate children of a .dashboard element which have class .title.
.dashboard > .title {
//styles here
}
I think the question is a bit ambiguous because there is no »do it that way« answer possible. BUT some reasoning will hopefully give some hints. I think the first question you should pose yourself is: will a span.title happen to appear in other places too, so that the style rules for it can be reused.
In this case you could start out by abstracting the style definitions like that:
html:
<div class="plugin dashboard">
<span class="title">Hey There!</span>
</div>
scss:
//general rules for each title in each plugin
div.plugin {
span.title {
}
}
//override or specify
div.dashboard {
span.title {
}
}
This way, by adding a second class you can take advantage of cascading nature of CSS and with tools like LESS or SASS you can guarantee that the order of style rules will be preserved.
Otherwise, if you just want to make sure that your style rules only apply for elements inside the .plugin__container, just scope it as you did in the question and take care that the outermost »main entry point« is unique enough.
div.plugin-namespace {
//all your rules here…
}
I hope It helped! Good Luck!
Is there anyway i can access the style property for the particular div? For example, I have a code like below
<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
I want to apply some other background color for this division. But i don't want to modify the class "testing", because it is being used in some other places also. Is there anyway using CSS only to access the style property and apply my new color?
I think attribute selectors may be what you are looking for:
div.testing[style="background-color:#ff00ff;"] {
background-color: new_color !important;
}
You can create another class and overwrite necessary property:
.testing-active {
background-color: red;
}
and use it like this:
<div class="testing testing-active"></div>
You need to make a style that has higher priority than the style. You could use the !important attribute to do that:
<div class="testing" style="background-color:#ff00ff;background-color:red !important;">
Big important caveat: whatever it is you're trying to do doesn't sound like a good idea, because the code will be very difficult to maintain. What is the underlying problem that you are trying to solve?
You can access the elements with this certain style like this:
.testing[style="background-color:#ff00ff;"] {
/* put your attributes here*/
}
but you cannot change the background-color attribute since this one has a higher priority in the html.
see this:
.testing[style="background-color:#ff00ff;"] {
background-color: #00f; /* not possible */
margin: 30px; /* possible */
}
what you can do is add a new attribute to your html like this:
<div class="testing" changecss="true">
This is my test Paragraph
</div>
and add this css:
.testing[changecss="true"] {
background-color: #00f;
}
See the JsFiddle as well.
"Think it is a dynamic code. How can i add new class without using javascript? "
The Answers is You cannot add a new class using CSS dynamically/ runtime. The only way to do it is by using javascript/jquery:-
HTML:
<div id="mydiv" class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>
JQUERY:
$('#mydiv').css('background','#ColorCode');
This way your class also wont change( since its being used in other places) and you can change the background also.
Can i ask why you are trying to achieve this using CSS?
I'd like to remove the css from a single table in a page where all other tables are defined with css (and need to be). How can i circumvent the css rules for a specific single table for an html/php page?
Given your defaults:
table {
margin: 0,
padding: 0,
border: 1px solid
}
When you want to have one table that goes against that rule, you could just add a css class to that instance and override the defaults:
<table><tr><td>Default Style</td></tr></table>
<table class="i-am-special"><tr><td>Special Style</td></tr></table>
Just use this css:
table.i-am-special {
margin: 5px;
border: 2px dotted;
}
You can reset/adjust as many or as little properties as you like in your "i-am-special" class.
Note also that it doesn't have to be "table.i-am-special" if the style can be applied to other things, that's just an example.
you can check out how the css rules define in your page
if the rule defined like: '.targetTable'{} (by class) or '#tableId'{} (by id)
it would be easy to remove the css rule by changing the table class/id on html code
else if it defined like: 'table{}' (by object)
Method 1:use jquery to reset the table(which you want to use other style) css
Method 2:change the css rule by using class or id selector
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
I'm trying to style some Drupal output. In particular, I'm trying to reference a class with a super long name (that includes spaces). I'm unclear the syntax for this. Forgive me, I'm a CSS newbie. See:
<article id="node-38" class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" about="/~actionin/node/38" typeof="sioc:Item foaf:Document">
<header>
<h2 property="dc:title" datatype="">National Nutrition Month: March 2012: “Get Your Plate in Shape”</h2>
I ultimately want to reference the H2 property. I was thinking it would be something like:
.node SOMETHING-HERE .header h2 { declaration; }
I cannot just reference the node, since it is used elsewhere for other purposes. I want to be specific and select only this class:
class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"
Using dots (.) you can combine multiple class as a group
.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix {
...
}
Maybe I'm not giving you the answer you need, but class names cannot contain spaces.
An element can have multiple classes, which allows you the combine multiple styling rules for different classes to apply to a single element.
If you have spaces in a class attribute, it creates an element with multiple classes, delimited by spaces.
For example, if you have an element like this
<div class="big red outlined"></div>
and you had CSS like this
.big {
width: 1000px;
height: 1000px;
}
.red {
color: red;
}
.outlined {
border: 1px solid black;
}
All three styles would be applied to the single div to make it big, red, and outlined.
In your case, it looks like you are trying to access a specific element, which is what the purpose of the id attribute is. Notice that the node has a unique id:
<article id="node-38">
You can access an element with a specific id in CSS by using the # selector, like this
#node-38 {
//style goes here
}
In your case, you probably want to do something like this:
#node-38 .header h2 {
//style goes here
}
Those spaces are effectively multiple classes on the one element, so your <article> tag has the "node" class, and the "node-article" class, and so on and so on.
So if you had:
.node { background-color: black; }
.node-article { color: white; }
Then the article would have a black background, and white text. Both would be applied.
Also remember you can reference tags, and ids, so to get to your H2 you could do:
article header h2 { .... }
or
#node-38 header h2 { .... }
And you don't necessarily need the "header" in there either, depending on what you want to achieve.
If you want to select all <h2>s that are descendants of <article> tags with the "node-article" class, then you can do this:
article.node-article h2
class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"
Above line contains total 9 classes because of spaces between them. so, node is a single class, node-article is another class and so on. If you want to reference a class then you should write it like
.node{background-color:red;}
If you want to reference multiple classes at once and want to apply same styles then you can write like
.node, node-article, node-teaser{background-color:red;}
In that case three individual classes node node-article node-teaser will have the same style with background color red. Now if you have multiple elements with same class i.e. article then all article with same class will have same style. To apply a style to a unique element you can id instead of class like id="node-38" and you can apply style with CSS to this element like
article#node-38{background-color:red;}
to select/reference the h2 inside header with parent element article that has id="node-38" you can write
article#node-38 header h2{background-color:red;}
When you define an element with a class, including spaces actually denotes multiple classes.
That article actually has the following classes applied to it : node, node-article, node-teaser, contextual-links-region, node-even, published, with-comments, node-teaser, and clearfix.
You could use any of those classes when targeting the element. If I were referencing the H2 tag I would do something like
article#node-38 header h2{
This is a much more specific way to target than using all of those classes. it's shorter syntax, and more specific to the element you want to style.