Let's pretend that I am using a CSS library (e.g. Bootstrap) that has its own CSS files together with a custom theme.
In Bootstrap's CSS, there might be a rule like this:
.foo {
border: 1px solid black;
padding: 4px;
}
And in my custom theme, .foo is overridden as:
.foo {
border-color: red;
border-width: 2px;
}
The effective, computed rule is gonna be:
.foo {
border: 2px solid red;
padding: 4px;
}
Is there a tool that given a set of one or more CSS files, can produce this reduced, minimized, effective CSS output?
Related
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
Is there any automated way to get CSS property and value with its selectors from one giant CSS file? For example,
.selector1 {
border-radius: 3px;
color: #000;
text-align: center;
}
.selector2 {
background-color: #000;
padding: 10px 20px;
}
Now I want to extract CSS below from CSS above based on #000 color value.
.selector1 {
color: #000;
}
.selector2 {
background-color: #000;
}
Finding and editing manually in text editor works, but this approach is hard to accomplish after CSS is changed which is changed frequently. So I wonder if there is any automated way to do that.
I thinks this is not possible with css but you can achieve it using JavaScript.
If I define the following CSS rule:
img {
max-width: 200px;
max-height: 200px;
border: 1px solid black;
}
Is there a pure-CSS way of detecting those image objects that would have been larger without the size constraints? Something that semantically matches:
img:resized {
border-color: green;
}
Alternatively: is there a way of only detecting large images in the first place? For example:
img {
border: 1px solid black;
}
img[width>200px], img[height>200px] {
max-width: 200px;
max-height: 200px;
border-color: green;
}
Thanks!
No, there are no CSS selectors that can query style properties, whether declared or computed, as rendering of DOM elements has no relation to the DOM hierarchy.
If I have two css files:
File 1:
.colorme
{
background-color:Red;
}
File 2:
.colorme
{
background-color:Green;
}
And have included them in a page, which one will take priority? I'm guessing the one that is loaded last? If so is there anyway to ensure which one css file is loaded last?
The one loaded last (or as David points out, more accurately included last) wins in this case. Note that it's per-property though, if you load 2 definitions with different properties, the result will be the combination. If a property is in both the first and second, the last wins on that property.
The only way to ensure which is used last/wins is including the <link> elements in the order you want in the page.
For the property, here's an example:
.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css
.class1 { color: blue; margin: 2px; } //Second .css
is equivalent to:
.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; }
I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:
#maincontent #left_side #comments{
margin: 100px;
}
or
#comments{
margin: 100px;
}
I see no visible effect.
Sorry, I think I am not very descriptive, but not sure how to describe the problem...
Maybe you could take a look at the demo url here:
http://chess-advices.com:8000/article/ololo/
And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)
Thanks in advance
You forgot to close this:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
change this to:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
}
To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...
But i think, if you add something like this:
form label { width: 100px; display: block; float: left; }
form p { padding: 5px 0px 0px 0px; }
your form would look nicer :)
I hope this is the answer of your question...
There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.
Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.