I would like to know how I can apply the CSS of one class in another. I did little bit of research on this and I found two solutions.
Using LESS
Specify both the classes like class="content colorTxt"
Unfortunately I cannot use both these options. Because I have permission to edit only the CSS files. So it would be great if you can let me know if there is any other option. Something like below:
.colorTxt{
color: Blue;
}
.content, .colorTxt
{
}
I tried this option, but it doesn't work. Please let me know what can be done.
What you're trying to achive is not possible with pure CSS.
There is one case when .content is the descendant of .colorTxt, but even then all that you can is inherit some know properties of .colorTxt, nothing more.
<div class="colorTxt">
<div class="content"></div>
</div>
.colorTxt { color: blue; }
.content { color: inherit; }
Related
I have a number of CSS categories1-n and I have the following code to assign attributes to all of them:
[class*="parentcategory"] { float: left; }
Now some of them also have pseudo elements of ::before and ::after, .e.g .parentcategory1::before and I struggle to assign attributes generally to all of these because I have the category number between "parentcategory" and e.g. "::before"
Is there a way to solve this?
Many thanks
David
Seems to work just fine like so. Any issues with this?
[class*="parentcategory"] {
color: red;
}
[class*="parentcategory"]::before {
color: black;
content: '::before';
}
<div class="parentcategory1">
parentcategory1
</div>
<div class="parentcategory2">
parentcategory2
</div>
I just wanted to know when is neccessary for me to place a div.cssclass when using two css classes together in my stylesheet. I normally troubleshoot by using with and without it until it works which obviously is fine and quick enough but I would be good to know the best practice.
Example:
.cssclass1 .cssclass2 { }
VS
.cssclass1 div.cssclass2 { }
Is it when its not a direct sibling to it, i.e the next class nested in there?
If both those elements are divs, then there is no difference, except that
.cssclass1 .cssclass2 {
is faster than
.cssclass1 div.cssclass2 {
If you'd have let's say:
<div class="cssclass1">
<div class="cssclass2"></div>
<a class="cssclass2"></a>
</div>
then .cssclass1 .cssclass2 { would select both div and a, while .cssclass1 div.cssclass2 { would select only the div.
The difference is Specificity because if you have .cssclass1 .cssclass2, all elements with that classes are affected BUT if you use .cssclass1 div.cssclass2, the only affected is the <div> element with the cssclass2 class.
As Jonjie said, it's about specificity. Here's an example...
div .cssclass2 {
background-color: green;
}
.cssclass1 div {
background-color: blue;
}
div div {
background-color: orange;
}
<div class="cssclass1">
<div class="cssclass2">
hello
</div>
</div>
As you can see, none of the styling declarations are an exact match for our html here. So, what colour should the background be? CSS has a way to resolve this ambiguity by identifying the css that is most specific to the html. There are some good blog posts about understanding CSS specificity.
Is it possible to add conditional formatting to change class on using hover effect on a div:
.resize:hover {
height: 360px;
z-index: 1;
.font_white {
color: blue;
}
}
.font_white{
color: white;
}
Is it possible to override font_white while hovering div with resize class? These classes are independent div's.
No it's not, not using pure CSS that is.
You can use JS, but without the code of your markup, it's hard to say what the best way is.
(Of course, if the font color is to be applied inside the div you hover, it is doable using CSS only, although not the way you describe it. But I assume you want to trigger style changes across the page by hovering a div.)
There is no generic way to achieve that with CSS.
If you can write a selector that matches both the element that is a member of the resize class and the element that is a member of the font_white class (which you would do using a combinator such as descendant, child or sibling) then you can use the combinator to achieve it.
For example:
.resize:hover ~ .font_white { ... }
would work if your HTML looked something like:
<button class="resize">Hover Me</button>
<section id="first">...</section>
<section id="second" class="font_white">...</section>
<section id="third" class="font_white">...</section>
You would need to select apropriate combinators for your particular HTML.
If you rewrite your CSS, you'll see that your desired effect is possible - and achievable without redefining the style declarations of your class.
Example:
.primary-text {
color: white;
}
.resize:hover {
height: 360px;
z-index: 1;
}
.resize:hover .primary-text {
color: blue;
}
Is there a way to mark a CSS rule as less important, such that it doesn't override a subsequent rule even if the first rule has higher specifically? For example, say I have the following in my CSS file:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
The idea I was going for is that all text input fields that are children of the div "inputDiv" get a width of 125px, except for certain specific inputs that get some other width. The problem is that the first declaration overrides the specific item declarations.
I've tried the following:
Append !important to each of the specific widths. Works, but many claim (rightly, I think) that !important should be avoided, and it is rather cumbersome as it must be added to each element with a specific width.
Prepend #inputDiv to each of the specific selectors, i.e. #inputDiv #differentInput1 Again, works, and avoids the issues with using !important, but still cumbersome as it has to be done to each element.
Is there any way to simply say that the items in the first declaration are less important, and shouldn't override anything?
There's no way to do this since it's antithetical to CSS in the same way that !important is -- doing the opposite would be just as abusive. Your only option is to rely on selector specificity. You can write this in a way that is not as cumbersome by using a class for inputDiv instead of an ID, for example.
maybe a way to solve you problem or answer your question you could try something like this
(http://jsfiddle.net/6aAF5/)
<div class="inputDiv big"> BIG</div>
<div class="inputDiv middle"> MIDDLE</div>
<div class="inputDiv small"> small</div>
<p>
<div class="inputDiv"> normal</div>
</p>
<style type="text/css">
.inputDiv {
background-color:green;
width:200px;
height:20px;
}
.inputDiv.big {
background-color:red;
width:400px;
}
.inputDiv.middle {
background-color:lime;
width:100px;
}
.inputDiv.small {
background-color:orange;
width:50px;
}
</style>
and little explanation about the !important
!important in a css file is used to override styles which are defind directly in the html.
this means if you have
<div class="isItImportant" style="background-color:red;width:100px;height:100px;"></div>
<style type="text/css">
/* this changes the styling */
.isItImportant {
background-color:green !important;
}
/* this doesn't change anything */
.isItImportant {
background-color:fuchsia;
}
</style>
(http://jsfiddle.net/6aAF5/2/)
You can avoid these issues by being smarter about your selectors, as others have noted. As a best practice, avoid IDs whenever possible, and try to use just one or two selectors for any given set of styling.
For example, rather than:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
You might try doing this:
input[type="text"]{
width:125px;
}
.differentInput1{
width:25px;
}
.differentInput2{
width:500px;
}
If you need more specificity than that, something like this would also work:
.inputDiv input[type="text"]{
width:125px;
}
.inputDiv .differentInput1{
width:25px;
}
.inputDiv .differentInput2{
width:500px;
}
Ultimately though, you want consistent styling throughout your site, so you shouldn't need to get so granular. You might want to look into OOCSS, which was great in helping me write lighter-weight, more scalable CSS.
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
http://oocss.org/
Well, there are some ways to achieve what you want to (if you don't want to do a lot of change),
Change your div id="inputDiv" to a class name class="inputDiv", and change your css selector to .inputDiv. This way your 1st declaration won't override your proceeding declarations.
Use LESS or SASS, which allow you to namespace css rules.
And lastly, You can override the (unwanted) styles using jQuery, but it's an unnecessary overhead.
PS: Being descriptive in CSS is rather helpful although it's cumbersome.
So I have been pondering about this and I don't think this exists. I also understand that my logic my be counter with what stylesheets are trying to accommodate, but let's give it a go:
Take the following example:
// Example "template style"
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
So let's say I want to add that to my footer I would in my HTML go:
<div class="blue_bold" id="footer">
// Content goes here
</div>
This is perfect, but what if I want to add that element to a number of my elements. Say I want to add it to my navigation as well, I would then have to add that class to each element:
<div class="blue_bold" id="navigation">
// Content
</div>
....
<div class="blue_bold" id="footer">
// Content
</div>
My question is, as appose to declaring it via a class or style, is there no way to "attach" the style to another style within my stylesheet? (as example:)
#navigation, #footer {
attach_style(".blue_bold");
}
That way I can minimize my code by creating "base styles" and then attach those styles to individual styles within my stylesheet? This is again just a question, not something I wish to impliment, but I figure that given the above it would be a "nice to have" for people working with say brand guideline documents and want to attach specific styles to individual styles without going to the html to do it.
Any ideas? Does this exists?
You can't do it with pure CSS. You'll need to use LESS, or SASS/SCSS to generate your CSS.
Syntax examples here :
LESS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
.blue_bold;
}
SCSS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
#extend .blue_bold;
}
you will need to have a look on sass or less they are your best options.
sass here
less here
You can use sass or less but a more basic slight workaround is just to list the elements in your css like so:
#navigation,
#footer,
.some-other-element,
.another-element
{
// css styles go here that you want to apply to each element listed above
}
Can't see any benefits. What you're asking for is not a standard CSS.
You can define this for all elements with class blue_bold
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
For this block
<div class="blue_bold" id="navigation"></div>
You can simply add another declaration like this:
#navigation, #footer {
background: black;
color: red;
}
Everything from .blue_bold will be used unless overwritten. What's wrong about it?