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}
Related
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; }
if #div2 is contained within #div1 is there any real advantage to referring to that in the css stylesheet? like this:
#div1 {
display:block;
}
#div1 #div2 {
background-color:#e0e0e0;
}
and then similarly. i have a table ID and then it's table headers
#myTable {
width:100%;
}
#myTable #productName{
width:75%;
}
The only advantage is that you can be more specific, for example create a rule that applies to some element only if it placed inside another one. But in most cases, there is no reason for that, and it may hurt the performance of your css (plus it creates code duplication, in case you want to change the parent ID).
In your case the selectors are IDs, and since there can be only one element with each ID, there are even less advantages for nested selectors, and probably you don't need them.
Read this article for more deep explanations.
As element-IDs are unique in the DOM the selected context is unambiguous in the given examples and there is no advantage whatsoever.
However, when you are working with classes nested selectors become very useful.
Generally its not useful to nest id selectors, but there are subtle differences, in the following, the nested rule has a higher specificity and the background will be red
HTML
<div id="outer">
<div id="inner">foo</div>
</div>
CSS
#outer #inner {
background-color: red;
}
#inner {
background-color: blue;
}
The rules for specificity are outline in the css spec.
That being said, classes are usually the way to go, but this can be useful for changing the styles of elements based on their container (if for some odd reason you cant/wont use classes)
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 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 */
}
Users can enter descriptions which may include paragraphs or lists. Or they may just enter text without any enclosing <p> or <ul> elements. What I need to do is remove most of the padding and margin above the first element and below the last element so that the user entered content has a nice tight border around it. So I could do one of the following:
Use a css rule I was unaware of to target only the first and last elements
Use css3 or html5 (I assume there's something within these to easily do what I want) and hope everyone upgrades their browsers asap while the older browsers just get a slightly uglier version of the page
Find the first and last elements with Javascript and modify accordingly
Modify the html to add a class like <p class="first">
Ideally the 1st solution exists, does it? I'm ok with the 2nd solution though if not, does it exist? The last 2 I don't care for...
UPDATE: don't care about IE6. But I do need to deal with the situation that if there's just text to begin with, without any <p> or <ul> or other elements, then actually nothing special needs to be done for the top margin/padding.
Use :first-child and :last-child like this. Note that > and :first-child (CSS2) doesn't work in IE6 and below, and :last-child (CSS3) doesn't work in IE8 and below. The only real workaround to both is to use a .first and .last class respectively (you can add them dynamically with JavaScript as Phrogz says).
.description > p, .description > ul {
margin: 1.5em 0;
}
.description > :first-child {
margin-top: 0;
}
.description > :last-child {
margin-bottom: 0;
}
I added the > combinator to prevent elements like strong or li getting selected. What does it mean?
Something like this?
.container * + p, .container * + ul
{
margin: 1em 0 0;
}
.container p, .container ul
{
margin: 0;
}
BoltClock's answer works great in most cases, but IE8 and earlier ignores the :...-child pseudo-selectors.
You can use jQuery to accomplish the same thing, while targetting more browsers.
//On ready...
$(function(){
//Update styles dynamically
$('ul:last').css({'margin-bottom':0,'padding-bottom':0});
$('ul:first').css({'margin-top':0,'padding-top':0});
});
Have you considered wrapping the content in a container with a negative margin? It requires the content to at least be wrapped in a single p element (not hard to test/add melodramatically).
CSS:
.container {border:1px solid black;}
.container .subcontainer {margin:-1em 0;}
.container p {margin:1em 0;}
HTML:
<div class="container"><div class="subcontainer">
<p>My first paragraph.</p>
<p>My second paragraph.</p>
</div></div>