Are there containers for CSS Selectors?
I'm simply curious if there's a more elegant way to do this without repeating the class:
#div1 .divClass, #div2 .divClass { color:cyan; }
This is what I had in mind, but I don't think there's a way to do it.
#div1,#div2 > .divClass { }
[#div1,#div2] .divClass { }
Short answer: No.
It seems a case where you can add a class for both divs.
<div id="div1" class="sharedClass"></div>
<div id="div2" class="sharedClass"></div>
.sharedClass > .divClass { color: cyan; }
Anyway, this question can have multiple answers. Consider looking at LESS, which extends CSS capabilities. Then you could do something awesome like this:
.divClass {
/* ... */
}
#div1 {
color: red;
border: 1px solid blue;
.divClass;
}
#div2 {
color: cyan;
border: 1px solid green;
.divClass;
}
Sounds like you're looking for a something like LESS, which is a stylesheet language which can be compiled into ordinary CSS. It might not do exactly what you're after in your specific case (but then again, it might, I haven't tried) but it sounds like it would be useful to you.
Related
I've been trying like a mad man to get the following LESS statement to work, but now i am fearing that it's not gonna happen :/ So I am turning now to you guys in the end for help!
I have the following statement:
.top{
&-first{
background:black;
&-item{
color:white;
}
}
&-second{
background:green;
&-item:extend(.top-first-item){}
}
}
I was hoping for to achive the following output:
.top-first {
background: black;
}
.top-first-item,
.top-second-item{
color: white;
}
.top-second {
background: green;
}
But unfortunately it does not compile that but this instead:
.top-first {
background: black;
}
.top-first-item{
color: white;
}
.top-second {
background: green;
}
LESS currently does not support extending a "concatenated name" selectors (basically, .top &-first &-item is interpreted as three distinct selector elements and never found by extend looking for a single selector).
A workaround for your particular case:
.top {
&-first {
background: black;
}
&-second {
background: green;
}
&-first, &-second {
&-item {
color: white;
}
}
}
Another option is to break the designations into separate classes:
LESS
.top{
&.first{
background:black;
&.item{
color:white;
}
}
&.second{
background:green;
&.item:extend(.top.first.item){}
}
}
CSS Output
.top.first {
background: black;
}
.top.first.item,
.top.second.item {
color: white;
}
.top.second {
background: green;
}
Which of course requires a change in your html designation from class="top-first-item" to class="top first item".
This is obviously something that should be working in LESS. I have a few months ago put an issue on the LESS.js github regarding exactly this.
Link to Github issue
In the mean time, i recommend using seven-phases-max's solution by simply putting the classes together like so:
&-first, &-second {}
But then you cant abstract the second out into another file.
Another solution would to make an "extends.less" file, in which you can have small snippets you find your self using time from time.
Just use 'all' suffix. Example: &:extend(.top-first-item all);
So I have the following at the top of bootstrap.css
.scrollable-table {
height: 800px;
overflow: scroll;
}
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
scrollable-table changes the look of some of my other html while doing what I need it to do. Specifically from what I can tell the height in .top-buffer is whats being changed. When I move it under those first two it works as expected without causing any issues. So this
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
.scrollable-table {
height: 800px;
overflow: scroll;
}
Where I use scrollable-table is here
<div class="span4 scrollable-table" style="background-color:white">
scrollable-table is also only ever used there!
For good measure I'll also show where top-buffer is used
<div class="span3 top-buffer" style="background-color:#DBDBDB">
I just don't understand how a completely unrelated class to the other two can change things so drastically. I understand that CSS cascades the styles, but in this case it makes no sense because they are not related. I should mention this is Twitter Bootstrap, and is at the very top over what CSS was already there. I'm hoping someone coud shed some light on why this.
The order of the classes in the stylesheet (but not in the HTML) matters because the stylesheet is read top to bottom. If you have two classes in this order:
.a { color: blue; }
.b { color: red; }
Both of these elements will be red:
<div class="a b">Test 1</div>
<div class="b a">Test 2</div>
But if you swap them around, both will be blue:
.b { color: red; }
.a { color: blue; }
I have an element lets say it could have .foo or .bar or both or none as a class:
<div class="foo bar">green</div>
<div class="foo">green</div>
<div class="bar">green</div>
<div class="something-else">red</div>
How can I test that the element doesn't have either class.
I tried something like this, but it doesn't work as expected:
div {
background: green;
&:not(.foo) and &:not(.bar) {
background: red;
}
}
I don't see many examples using less and not(), only 1 in their docs.
To say not to multiple conditions in a CSS selector, you need to chain them together: div:not(.foo):not(.bar)
div {
background: green;
&:not(.foo):not(.bar) {
background: red;
}
}
I was able to do it by nesting two &:not() rules, but I'm not sure this is the best way.
div {
background: green;
&:not(.foo) {
&:not(.bar) {
background: red;
}
}
}
There is always the pure css alternative.
div { background: red; }
div.foo, div.bar { background: green; }
I was wondering if something like this can be done in CSS. I want to be able to group css so that I can I don't have to write it like this.
.wrapper .header {do: something};
.wrapper .nav .firstMenuItem {do: something};
[div id="wrapper"]
[div class="header"]
[div class="nav"]
[ul]
[li class="firstMenuItem">First Item</li]
[/ul]
[/div]
[/div]
[/div]
Instead, I would like to do something like this but I've never seen it being used like this
.wrapper
{
.header .nav {do:something;}
.header .nav .firstMenuItem
{
do: something;
}
}
You can do this with LESS and SASS
However, before going too far down this road I recommend you read a little about Object Oriented CSS. (Some good tips from people who have experience with large projects)
LESS example:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
SASS example:
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
#extend .error;
border-width: 3px;
}
You can't do that with pure CSS, but you can use something like:
LESS
SCSS
Not with CSS alone, but you can for example use LESS which provides this kind of nesting.
I'm afraid that is just not possible in classic CSS. It is against the syntax.
There to exist interpreters for alternative syntaxes, which will just turn your syntax into valid CSS either at compile-time or run-time. You could look for or write one of those.
But if you want what you write to be valid CSS, this is just not possible.
Let say I have to repeat the color blue in my web page, what's most effective, time saving, and smart way of doing it?
Examples:
1. This example can mess up a little bit my css file.
#header, #content, #footer {
color: blue;
}
#header {
(other properties)
(other properties)
(other properties)
}
#content {
(other properties)
(other properties)
}
#footer {
(other properties)
(other properties)
(other properties)
}
2. With this example I'll end up modifying my html file more often.
css:
.default-color {
color: blue
}
#header {
(other properties)
(other properties)
(other properties)
}
#content {
(other properties)
(other properties)
}
#footer {
(other properties)
(other properties)
(other properties)
}
html:
<div id="header" class="default-color">
(content here)
</div>
<div id="content" class="default-color">
(content here)
</div>
<div id="footer" class="default-color">
(content here)
</div>
I'd prefer the first form. Adding a "default-color" class starts to move into the territory of adding style into your markup, and it's generally more flexible to keep them separate as much as possible. On the other hand, if you have a semantic class name you can add to all of those that makes sense, then that could work.
Otherwise, if you really do just want a "default" color, you can specify it on the html or div elements in your css, and just override it with more specific classes where you don't want elements to show up as the default color.
Consider authoring your stylesheets using SASS. This will allow you to manage duplication in a number of ways:
The simplest is to define a variable for your blue color and not worry about having to update multiple occurrences:
$color-corporate-base: #009
#header { color: $color-corporate-base; }
#content { color: $color-corporate-base; }
This will compile to regular CSS, putting the color values wherever they're referenced in your document:
#header { color: #009; }
#content { color: #009; }
You could use "mixins" to include rules into different selectors:
#mixin bold-color {
color: blue;
font-weight: bold;
}
#header {
#include bold-color;
background: black;
}
#content {
#include bold-color;
background: white;
}
This will compile to regular CSS, with the two included style rules in each selector. Of course, this creates duplication:
#header {
color: blue;
font-weight: bold;
background: black;
}
#content {
color: blue;
font-weight: bold;
background: white;
}
Even though that takes care of the duplication in your Sass stylesheet source making it easy to work with, the CSS output still has that duplication. (You could group the common styles with commas and put the different styles into their own selectors, but that's right back to your original question.)
There's a cool new feature of Sass that addresses this. It's called "selector inheritance". Check it out:
.bold-color {
color: blue;
font-weight: bold;
}
#header {
#extend .bold-color;
background: black;
}
#content {
#extend .bold-color;
background: white;
}
At a glance, this seems very similar to mixins, but look at the CSS output:
.bold-color, #header, #content {
color: blue;
font-weight: bold;
}
#header { background: black; }
#content { background: white; }
This lets you organize your selectors in your Sass stylesheet as you wish, and, you get the optimized output you want!
One way of doing it for standard compliant browsers would be to use !important.
Example:
div
{
color: blue !important;
}
I would prefer the first version, too. But remember that you can also use multiple classes within one element. So you could you something like:
.blue {
color: #00F;
}
.bold {
font-weight: bold;
}
<div class="blue bold">Text</div>