This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 6 years ago.
Can I wrap a class (or id) around styling to apply it to elements only in that class?
For example, I have :
.title {
color: #000;
}
.block {
width: 100%;
}
.wrapper {
width: 90%;
}
I'd like to create a different design for these things, if they are in a specific class. I know You can do it like so:
.specific_class .title{
color: #fff;
}
But then I have to add it to each block. Can I do something like this?
.specific_class{
.title {
color: #fff;
}
.block {
width: 99%;
}
.wrapper {
width: 91%;
}
}
..just to assign different styles to work, if elements are in a specific class.
(I know the last example doesn't actually work).
I have a lot of these little blocks, so one "wrapping" would work and look a lot better than copy/pasting .specific_class in front of each one.
I'd like to apologize, if such question exists. I just couldn't find the correct words and find the solution, but there probably is a question like mine.
It is not possible in regular CSS. However, you might be interested in SASS, a CSS preprocessor that allows you to write nested rules (amongst other things) and compile them down to regular CSS.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
So, I'm having a look at some naming conventions. I'd like to try and have some class names similar to: .block(red).
So my HTML would look like:
<div class="block(red)"></div>
my compiled css should look like:
.block(red) {
padding: 100px;
height: 100px;
width: 100px;
background: red;
}
So i would like my SASS to look something like:
.block {
padding: 100px;
height: 100px;
width: 100px;
&\(red\) {
background: red;
}
}
Obviously as the (red) part of the class name is only extending the parent class name it won't bring in the styles from .block, I could #extend .block within the (red) class but that will be a little messy over time.
So, is there any way you guys can think of, that allows me to write SASS like my above example while only having to write one class on my element?
First of all, parentheses aren't allowed in CSS class names, they're reserved for certain selectors.
Update: escaping the parentheses using \(\) does seem to be allowed and works.
If you want to do something like this, you could use OOCSS, BEM, SMACSS, ACSS or something similar.
Update:
If you really only want to use one CSS class, you could use a SCSS #mixin like this:
Codepen: http://codepen.io/grrtbrtr/pen/KVeOja
SCSS
#mixin modulify($selection-modifier) {
$self: &;
&\(#{$selection-modifier}\) {
#content;
#extend #{$self};
}
}
.block {
padding: 100px;
height: 100px;
width: 100px;
#include modulify('red') {
background: red;
}
#include modulify('blue') {
background: blue;
}
}
HTML
<div class="block(red)"></div>
<div class="block(blue)"></div>
For me, it keeps the SCSS code clean, and allows you to use only 1 CSS class in your HTML.
This question already has answers here:
What do commas mean in CSS selectors? [duplicate]
(4 answers)
Closed 7 years ago.
What does this type of CSS definition mean? Note the first two classes are separated without comma but the last two are separated with comma.
.Container .layout, .groupContainer
{
width: 100%;
}
The comma separates selectors allowing one group of CSS styles to apply to multiple different groups. In your posted CSS:
.Container .layout,
.groupContainer {
width: 100%;
}
width: 100% will be applied to elements of class layout within elements of class Container, and to elements with the groupContainer class.
References:
CSS: 'Groups of Selectors'.
It is shortcut of
.groupContainer
{
width: 100%;
}
.Container .layout
{
width: 100%;
}
You should use it to group your CSS
As explained above, it helps group single CSS declarations across multiple selectors, and can help save file size (which could come in very handy as your CSS file gets larger!) and make things a bit clearer to read.
For example, you could have multiple selectors with the same declarations:
.div1 {
color: red;
}
.div2 {
color: red;
}
.div3 {
color: white;
}
.div4 {
color: white;
}
And you can shorten this by using:
.div1,.div2 {
color: red;
}
.div3,div4 {
color: white;
}
The comma is used for grouping, when the same rule applies for several selectors. Each selector is completely independent of the others.
The space is used for select any .layout that are inside .container, even if there are other elements between them.
For your question, the answer is:
you grouping .layout which is inside the .container class and .groupContainer for both the width value is 100%.
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 9 years ago.
This might be a noob question, but I'm trying to search by terms like "CSS add more propertiers to existent class"; "Add CSS properties to class"; etc and I can't find what I'm looking for.
Imagine I have this:
.ui-bar { color: red }
Now I want to extend this property, but continue with the same color red.
.ui-bar-margin { margin-top: 10px; }
How can I accomplish this? If you want, you can point me links or terms to search for.
Thanks!
You just do it like this... Here's a lot of examples.
.ui-bar {
color: red;
margin-top: 10px;
background: white;
width: 300px;
display: block;
text-align: left;
}
I've tried to find the answer, and can't seem to do so, which is leading me to believe that it isn't possible. With my minimal knowledge of how CSS works, I also don't think it would be possible, but I just want to ask before I start working around a problem that may or may not exist.
Basically what I'm trying to do is use a previously defined attribute in a new class in my CSS stylesheet. For instance, say I had a couple of classes that just held background or font colors, like this:
.black { background-color: #000000; color: #000000; }
.white { background-color: #FFFFFF; color: #FFFFFF; }
Now if I was defining a new class (or using any selector for that matter), would it be possible to use the value of an attribute from an already existing class? Here is what my idea would look like:
.newClass {
width: 100%;
height: 100%;
background-color: .black; /* this would just get the background-color attribute from the .black class definition */
}
background-color: .black; is basically just a placeholder for "get the background-color attribute from the .black class definition". Is that possible using purely CSS? I'm aware of a ton of alternatives with PHP/JS, but I'd like to know if CSS can tackle this by itself. Thanks guys.
SASS is a thing to go. Your code will be like
#mixin black-theme {
.black { background-color: #000000; color: #000000; }
}
.newClass {
width: 100%;
height: 100%;
#include black-theme;
}
SASS
PHP compiler for SASS PHPSASS
There are javascript based solutions too like LESS but I generally don't recommend them as if Javascript load slow then presentation becomes jerky.
No, this is not currently possible in CSS. CSS does not have variables or the ability to reference values from previous rules. You would have to look for a CSS preprocessing language that gets processed into plain CSS before going onto the web site.
If you're willing to go the preprocessed way, you can look at SASS or LESS.
Yea possible using SASS or LESS css
#bgcolor : black;
.newClass {
width: 100%;
height: 100%;
background-color:#bgcolor;
}
Is there a way to simplify the following css rule so that .x-grid-row selector won't have to be repeated?
#OpenRequestListGrid .x-grid-row, #MyRequestListGrid .x-grid-row {
line-height: 13px;
padding: 0 1px;
vertical-align: top;
background-color: #BBB;
}
Important issue here is that I don't want to specify .x-grid-row by itself as this rule is from a larger library.
Note: maybe I wasn't clear the first time but I don't want to use .x-grid-row as this will effect other grids that I want to leave alone. I would like to target just my two grids. What I am aiming for is not repeating the same config twice one for each grid ID.
HTML sample :
<div id="dontChangeMe" class="x-grid-row">
<div id="OpenRequestListGrid" class="x-grid-row">
<div id="MyRequestListGrid" class="x-grid-row">
CSS doesn't have variables, but when you want to select all elements .x-grid-row in your document, you should simplify it to:
.x-grid-row {
line-height: 13px;
padding: 0 1px;
vertical-align: top;
background-color: #BBB;
}
Or just search for a common parent of your .x-grid-row when talking about a partial scope and use it like:
#common-parent .x-grid-row {
...
}
or
.common-parent .x-grid-row {
...
}
or any other css selectors ;)
EDIT
I just reread your question and you could also use a global selector like .x-grid-row {...} when you want to address a lot of elements and just specify more selectors like #inner-box .x-grid-row { ... } to change values back to default for only few elements.
How about just using .x-grid-row or using a selector which is a parent to both #OpenRequestListGrid and #OpenRequestListGrid.
So the Answer is there really isn't another way. Repeating element id and then the same selector is necessary. Thanks to all those who replied.