I hope this isn't a duplicate, but I'm not sure even how to phrase what I'm trying to do. I have some utility CSS rules for like clearing floats and creating horizontal boxes. What I want to do is something like this:
.clear{
clear:both;
}
#someID > div{
/*apply the .clear class here*/
}
I know I can do this with JavaScript, but I would like to avoid having class="clear" a million times if I can avoid it. I would also like to avoid duplicating the style information in the second selector so I don't have to maintain multiple utility classes.
The .clear class is just an example, my actual classes are more involved.
Really, you're just going to have to use your utility classes like clear throughout your markup, unless you want to do something like this (which is probably not what you want):
.clear, #someID > div
{
clear:both;
/* this assumes you have no other rules here, which probably isn't true */
}
In short, there's not much better you can do, unless you want to use a preprocessor for your CSS, like LESS.
You can't do it in pure CSS. You can do it easily with LESS or jQuery, just use:
$('#someID > div').addClass('clear');.
In HTML/CSS, you can have multiple clases like this:
HTML
<!--If you are using a id and a class:-->
<div id="someID" class="clear"></div>
<!--If you are using 2 classes-->
<div class="someClass clear"></div>
CSS
.clear{
clear:both;
}
#someID {
/* specific style here */
}
.someClass {
/* specific style here */
}
Related
I have a scenario where I am getting ID generated like this
<div class="containerLength">
<div id="new-1"></div>
<div id="new-2"></div>
<div id="new-3"></div>
<div id="new-4"></div>
</div>
and so on
is there a way I could write some css to target them through a loop?
maybe something like
#new[i; for(i=0; i<="containerLength.length"; i++)]{
float:left;
}
Probably I am day dreaming correct?
You can't do loops with pure CSS, however, if you're using something like SASS or LESS then you can do both like:
SASS:
#for $i from 1 through 4
.#{$class-slug}-#{$i}
width: 60px + $i
LESS:
Can you do a javascript for loop inside of LESS css?
However, assuming you just want to apply the same style to each nested div, you can just do
.containerLength > div{
float: left;
}
or perhaps create a class named .float-left and apply it to each element you want floated right.
You can do
div.containerLength > div { /* > Matches only first level children of the wrapper div */
float: left;
}
div[id|="new"]{
float: left;
}
documentation
You may or may not need the quotes, it's weird sometimes.
you can't write any logic at all in css. you can, however, managed css with JavaScript, or include multiple id's in one rule, or just use a class.
You also may be able to use Css attribute selectors, depending on how the ids are arranged and how broad you need your browser support to be.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Why don't you try this:
.containerLength > div {float:left}
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.
I have this CSS on my page.
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
opacity:1;
filter:alpha(opacity=100);
}
I want to have a few images that aren't affected by this opacity. How would I go about accomplishing this?
The best way to do it would be to give it a unique ID and target it separately:
img#theID {
// CSS for that particular image here
}
Method 1
The most popular method to accomplish something like this suggests the usage of specificity. Basically, the more specific the selector is, the higher precedence. Consider this markup
<section>
<div class="container">
<img src="blahblah.jpg" />
<div class="wrap">
<img src="blahblahblah.jpg">
</div>
</div>
<section>
<img>
<img>
If you use
img {
/* Styles */
}
Those styles will be applied to all. But if you used something like this
section .container .wrap img {
/* Different Styles */
}
Those styles will take precedence for that image, because CSS likes the most specific answer you can give.
Method 2
In addition to this answer given by user125697, which suggests using id's as such
/* img#ID - ID can be whatever you want*/
img#hover {
opacity:1;
filter:alpha(opacity=100);
}
And you would impliment it as such
<img id="hover" src="blahblah.jpg" />
Chris Coyier has published a pen about this. To test the results, just remove one of the classes from the box, and you will see that it changes colors. So basically classes are always overridden by IDs
Method 3
Not Encouraged
The final method I know of is to use !important, which overrides every style on the page. No matter what. This is highly disapproved of, because it can create a lot of problems down the road.
There are 2 methods for external css assignments.I am using the first method; most websites use the second method. I wonder whether I am doing it wrong!
Fisrt method:
Create a class for almost each & every css rule and use them anywhere.
<div class="f_left d_iblock">
<span class="w_100 f_left">blah blah</span>
</div>
.f_left{
float:left;
}
.f_right{
float:right;
}
.d_block{
display:block;
}
.w_100{
width:100%;
}
....
....
Second method:
Create css rules for each element.
<div id="container">
<span>blah blah</span>
</div>
#container{
float:left;
display:inline-block;
}
#container span{
width:100%;
float:left;
font-weight:bold;
}
In general I am using the first method. I am choosing this method because this provides the following to me.
Small css files hence provide less load time.
Reusable css rules.
Clear code hence CSS management is more easier than second method.
I don't need to create an id or class attribute but only assign css rules. So I don't need to think of a name for each element :)
I think browsers can interpret css rules fast so this enhances the performance.
I see most sites generally don't use this method most and I am starting to think that I need to strive to improve performance, but I am bulking html files instead of css with writing 3 to 4 css rule names to each element.
Note:I know little English. I hope you can understand me. I will be happy if you can write simple sentences :)
The main reason not to do it the first way is that it doesn't separate presentation from content: your HTML elements will look like <span class="f_left d_block w_100">, with the presentation embedded into the HTML itself. The whole point of CSS is to remove the presentation from the HTML so you can write <span class="product-list-description"> in HTML and then define the style in CSS.
The first method allows perhaps fewer CSS rules which can be re-used on lots of different elements, but it forces you to change your HTML whenever you want to change presentation. For example, if you have lots of elements with the same CSS rules applied, if you want to change how they look you'll have to change the HTML for every one of those elements. This is a lot of work and is prone to errors. With the second method, you'd have a CSS rule that applies to all those elements, and to change their presentation you only have to change the rule. In most projects this is a significant advantage.
Your both method is not so good yet. you can write second method like this:
#container{
float:left;
}
#container span{
display:block;
font-weight:bold;
}
But your approach for creating a separate class for every property is not good.
There are some good article you have to read about check these
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.mozilla.org/en/Writing_Efficient_CSS
UPDATED
Why your approach is not good suppose i have three different element there most of the property is same but are different.
For Example:
.one{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:18px;
color:#000;
line-height:1.5;
}
.three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:13px;
color:#000;
line-height:1.5;
}
You can write this in a better way which decrease your CSS file size. Write like this:
.one, .two, .three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
font-size:18px;
}
.three{
font-size:13px;
}
So, if i go through your approach i have to define each property separately, it's time consuming & heavy also.
I want to override another style sheet and set the float for all elements to none. If I use 'div, span, a' as the selectors or even 'body div, body span, body a', it doesn't override the previous class selector. I could use !important but this isnt great for obvious reasons.
.class {
float: left;
}
/* my overide */
div, span, a {
float: none;
}
Note- in the code ive only shown the class of 'class', but actaully their are many classes and id's.
Is there a way to do this without using !important? The reason im doing this is im mobile optimizing my site with media queries. I need to remove absolute positioning, floats, etc for all elements, but then i will want to add some of these styles to specific elements.
Thanks
As I wrote in my comment above:
Using the * selector is generally ill-advised. Selectors focus on the
key selector first (the right most selector) and so using the *
selector means that the browser must find all elements on the page.
This is a huge performance issue.
You can read more in this answer: (why) is the CSS star selector considered harmful?
Rather than using the * selector as you have, I'd stick with targetting the elements you want to affect, specifically.
Chances are, there will only be a few types of elements in your page that are floating.
These are usually some divs, perhaps some images, a list or two?
div, img, ul, ol{
float:none;
}
If there's a few more you can include them also.
#jdin; for overide the .class float just write like this:
div.class, span.class, a.class {
float: none;
}
EDIT:
Define an ID in your body tag like this
HTML:
<body id="home">
<div>Tag</div>
<span class="class">Class</span>
<div id="id">ID</div>
</body>
CSS:
body#home *{background:pink;border:1px solid #000}
Check this example http://jsfiddle.net/sandeep/D7Sg6/2/