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%.
Related
This question already has answers here:
Change CSS After x Characters
(3 answers)
Closed 3 years ago.
I wanted to create a wordpress website and in its live CSS edit part I selected the website name "Standard" and then I tried to change the first letters using :nth-child and :nth-letter pseudo classes. But I can't. Can I edit the site name with CSS styles. The way I chose to select the word was using these classes: header .logo .site-title and I put the pseudo-classes like this:
header .logo .site-title:nth-child(1):nth-letter(-n+2) {
color: pink;
}
And so the way I tried has'nt worked. Can you help me to solve the problem and people who are searching about this?
.site-title {
color: pink;
}
Try to use this CSS
.site-title:after {
color: black;
color: blue;
content: attr(data-descr);
left: 0;
position: absolute;
}
And HTML
<div class="site-title" data-descr="S T">SITE TITLE</div>
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.
This question already has answers here:
Succinct way of specifying two or more values for an attribute in css selector
(2 answers)
Closed 6 years ago.
Is it possible to simplify comma separated CSS selectors with common prefix/suffix?
My current style looks like this (much longer though):
html:lang(qw) div[data-domain*='abc.com'], html:lang(qw) div[data-domain*='def.com'], html:lang(qw) div[data-domain*='ghi.com'], html:lang(qw) div[data-domain*='jkl.com'] {
display: none!important;
}
I'm wondering if something like the following would be possible:
html:lang(qw) div[data-domain*=('abc.com', 'def.com', 'ghi.com', 'jkl.com')] {
display: none!important;
}
As per the comments, this is simply not possible with plain CSS right now. Your only option to shorten the selector is to use a pre-processor, like SASS (Syntactically Awesome StyleSheets). SASS allows you to write more readable, shorter code. You can compile a SASS (*.scss) file to plain CSS on your own computer, so by the time it's on the server, it's the plain old CSS you are used to, understood by all browsers. No extra requirement from your users.
For this particular case, you could use a for-each loop.
#each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' {
html:lang(qw) div[data-domain*='#{$domain}'] {
display: none !important;
}
}
This would result in the following CSS:
html:lang(qw) div[data-domain*='abc.com'] {
display: none !important;
}
html:lang(qw) div[data-domain*='def.com'] {
display: none !important;
}
html:lang(qw) div[data-domain*='ghi.com'] {
display: none !important;
}
html:lang(qw) div[data-domain*='jkl.com'] {
display: none !important;
}
I recently started using BEM methodology and I'm confused about class inheritance, or rather - when we talk about BEM - some use cases of modifiers.
Let's look at this example, I have a simple element with few children
.b-content { width: 100%; }
.b-content__image { display: block; }
.b-content__date { font-size: 14px; }
.b-content__title { font-size: 30px; }
.b-content__text { font-size: 16px; }
Now I want to reuse my .b-content block with slightly different styles, so I use modifier .m-compact and now I'm not sure what approach is the right one (in BEM).
Whether I should append modifier class to all elements (which I find more valid according to documentation):
.b-content.m-compact { width: 50%; }
.b-content__image.m-compact { display: none; }
.b-content__date.m-compact { font-size: 12px; }
.b-content__title.m-compact { font-size: 24px; }
.b-content__text.m-compact { font-size: 14px; }
or should I append modifier only to the parent element:
.b-content.m-compact { width: 50%; }
.b-content.m-compact .b-content__image { display: none; }
.b-content.m-compact .b-content__date { font-size: 12px; }
.b-content.m-compact .b-content__title { font-size: 24px; }
.b-content.m-compact .b-content__text { font-size: 14px; }
I find this second method more logical, you know, since I'm writing cascading styles and in real world if I want to write e-mail to 10 people, I would write one and just add more recipients, but on the other hand I realize BEM is practically non-cascading approach.
So what should I use and why?
As you point out in the last lines of your question, when doing BEM you should avoid cascading so, as a corollary to this, you don't have to repeat the modifier where it isn't needed.
For your Modifier I'd write something like this:
.b-content--m-compact {
width: 50%;
}
In your example the Block and the Modifier set only the width, so this is a limited use case. In general it comes handy to use some kind of CSS preprocess to ease the code writing, e.g. in SASS:
.my-block
width: 100%
color: red
&--modifier
#extend .my-block
border: 1px solid red
which will results in:
.my-block, .my-block--modifier {
width: 100%;
color: red;
}
.my-block--modifier {
border: 1px solid red;
}
Modifier in BEM looks like this: .block_modName_modValue
You can add additional class - but it's not BEM. And also modifiers have a name and value.
Block in BEM set namespace
So you set default styles for blocks and all unique(that can be changed) place in css with modifiers. This way your styles don't messed up.
To do this you need:
Place common styles in block styles(.portfolio)
Place unique style(with modifiers) like this.(portfolio_theme_list)
In css you don't need to separate this(preprocessor will be needed).
.portfolio {
/* common styles */
&_theme_list {
/* modifiers style */
}
}
In BEM project-stub(template engine) it would look like this:
If you add modifier to block. Then compile(bemjson) to html.
{
block : 'portfolio',
mods : { theme : 'list' },
}
You will see this code
<div class="portfolio portfolio_theme_list">
</div>
You write elements correctly and understand that they need to be separated(without inheritence).
So now you need just define styles for your block with modifier(portfolio_theme_list).
You have 2 options:
1) If you have 2 different blocks - you need separate common and
unique styles. Unique styles place in styles with modified blocks.
2) If you have only 1 different block & you already have styles on
this blocks. Then you can override and don't separate common
styles(but it can cause pain if you add another modifier/instance)
This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 6 years ago.
is it possible to create a background with rows which are different colored?
Here's some Pseudo-Code to illustrate it:
body {
row-1 {
height: 250px;
background-color: red;
}
row-2 {
height: 250px;
background-color: yellow;
}
.
.
.
row-n {
height: 250px;
background-color: green;
}
}
Is it possible to do that in css only?
You can use gradient to achieve this. You can use a online css gradient generator. Here is an example.
EDIT: I think I misinterpreted your question. Are you just asking how to give different divs in your body different colors? either give them all distinctive classes so you can style each of them independently, or use :nth-child(x) where you replace x with the div number you want to style (e.g. if you want to style the second div, use :nth-child(2)