I would like to know if we can catch these 2 differents cases avoiding javascript parsing:
<div class="a b"></div>
<div class="a"></div>
div.a.b {
color: red;
}
div.a { //Specify "when there is no class b"
color: blue;
}
With CSS3 you can use :not:
div.a:not(.b) { ... }
With CSS2 it's not directly possible, but but you can set the attributes you want and "unset" them with the div.a.b rule. You are already doing this: your divs are red, but "when there is no class b" they are blue.
Using CSS3 selector:
div.a:not(.b){
color: blue;
}
http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/
Related
I have three class : product1, product2, product3. I can add css to all these class as follows:
.product1, .product2, .product3{
// add css here
}
But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:
.product1to3{
// fun with css.
}
Is there any approach in css?
There is no such kind of css pseudo on what you wanted to achieve.
You can try to use SASS to achieve what you wanted.
and then use the #for Directive
SASS
#for $i from 1 through 3 {
.product#{$i} { width: 20px; }
}
CSS
.product1 {
width: 20px;
}
.product2 {
width: 20px;
}
.product3 {
width: 20px;
}
Also you can try to use LESS
Hope this helps
pure css implementation JSfiddle
So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range
div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
background: red;
}
Really good article on complex css and nth:child
/* This selects all the elements which have the class name starting with
"product"
*/
[class ^= "product"] {
//CSS
}
If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".
[class*="product"]
div{
border:2px solid tan;
height:40px;
}
[class*="product"]{
background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>
It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.
Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.
html
<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>
css
/* shared styling */
.product {
display: flex;
background-color: gray;
border: 1px solid red;
}
/* individual styling */
.product1 {
color: black;
}
.product2 {
color: white;
}
.product3 {
color: blue;
}
I want to output:
.selector.another-selector .selector__block{some declaration}
but i want to nest it:
I am using & at the end so I can nest it under __block,
but how can I make it adjoin class with .selector?
code example:
.selector{
&__block{
// i want to put my .another-selector declaration here
.another-selector &{
//syntax issue
//need to make it .selector.another-selector .selector__block
}
}
thanks in advance.
If you nest your selector, then it has to be in the .selector__block context (&).
You have 2 solutions here :
You can repeat the first selector, as such:
.selector {
&__block {
...
.another-selector.selector & {
// Here `&` means `.selector__block`
}
}
}
You can nest differently:
.selector {
&__block {
...
}
&.another-selector &__block {
// Here `&` means `.selector`
}
}
Maybe the second solution is better since it respects the inception rule and is less dependent of the DOM structure.
BTW, you can also try https://www.sassmeister.com/ to play with your selectors
I would suggest that you don't nest BEM at all. Just go with plain declarations for two valid reasons.
1) error tracking nested BEM is hard, let say you get a class from devtools that is .hero__heading. That will not match anything in your code when doing a search. Now the example above is not that hard to figure out anyway but inheriting a project with nested structure is a pain. I suggest reading Harry Roberts article on code smells in css
2) nesting like this will often complicate when wanting to override with other classes like in your case.
Consider this code:
.selector {
background-color: deepskyblue;
}
.selector__block {
color: lightblue;
.another-selector & {
color: lightcoral;
}
}
#Dejan.S I'm not a big fan of BEM (but that's another rant ;-). If however you are using BEM I think nesting will help to illustrate the hierarchy and what to expect
SCSS:
.selector {
// selector styles
color: red;
// default selector block style
&__block { color: green; }
// selector variant selector block styles
&.foo &__block { color: blue; }
&.bar &__block { color: yellow; }
}
CSS Output:
.selector { color: red; }
.selector__block { color: green; }
.selector.foo .selector__block { color: blue; }
.selector.bar .selector__block { color: yellow; }
HTML:
<div class="selector">
Selector <!-- red -->
</div>
<div class="selector">
Selector <!-- red -->
<div class="selector__block">
Selector Block <!-- green -->
</div>
</div>
<div class="selector foo">
Selector <!-- red -->
<div class="selector__block">
Selector Foo Block <!-- blue -->
</div>
</div>
<div class="selector bar">
Selector <!-- red -->
<div class="selector__block">
Selector Bar Block <!-- yellow -->
</div>
</div>
I'm struggling with a fairly trivial problem I assume, never having had prior experience with CSS. How do I change the placeholder text color of something like this?
<div class="square">
<input class="circle" placeholder="blue" />
</div>
I thought something like this might work, but it didn't
.square{
.circle::-webkit-input-placeholder {
color: blue;
}
}
Also, I would like to know how to accomplish the same if its nested further down the hierarchy. Would it be possible to skip elements in between the target placeholder and the outer element?
To target the .circle element inside a .square element, you want to write :
.square .circle::-webkit-input-placeholder {
Change your syntax to the code below:
.square .circle::-webkit-input-placeholder {
color: blue;
}
<div class="square">
<input class="circle" placeholder="blue" />
</div>
It seems like you've used a SASS syntax.
Hope this helps!
Try this..and check this
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
Consider the following HTML:
<div class="a">
<div class="b">Hello</div>
</div>
<div class="c">
<div class="b">World</div>
</div>
Adding the following CSS colors only "World" in red, as expected:
.c .b {
color: red;
}
But, adding the following CSS instead colors both "Hello" and "World" in red:
:not(.a) .b {
color: red;
}
Why?
You need to give it like this:-
Demo
div:not(.a) .b {
color: red;
}
Pseudo-class :not
Syntax is selector:not(){ properties }
Since the :not pseudo-class represents an element that is not represented by its argument,
you have to specify the element you want to exclude before the :not selector
Per your example, try this instead:
div:not(.a) .b {
color: red;
}
I have the following CSS:
.foo .bar {
background: red;
}
Which works fine for the following HTML:
<div class="foo">
<div class="bar">I have a red background</div>
</div>
But I can't seem to find a way to reuse the CSS definition when I'm not in a parent/child relationship. For example, how could I apply the same CSS to the following DIV:
<div class="???">I want a red background!</div>
You can add additional selector with comma (,) as specified in W3C selectors grouping
.foo .bar, .foobar {
background: red;
}
this would work in both
<div class="foo">
<div class="bar">I have a red background</div>
</div>
and
<div class="foobar">I want a red background!</div>
You can use a comma to indicate multiple selectors that a CSS rule should apply to
.foo .bar, .??? {
background: red;
}
Use a comma separated list of selectors in the definition:
.foo .bar, .otherSelector, #someID{
background: red;
}
.foo .bar, .redback {
background: red;
}
will do a magic with
<div class="redback">I want a red background!</div>
or get rid of hierarchy and use only
.bar {
background: red;
}
which will work both cases
Try
.foo .bar, .foobar {
background: red;
}
with
<div class="foo">
<div class="bar">I have a red background</div>
</div>
<div class="foobar">I want a red background!</div>
The ".foo .bar" CSS definition is written expressly for a parent-child (more accurately ancestor-decendent) relationship.
You could write the CSS like this:
.alternate-background {
background: red;
}
and the HTML like this:
<div>
<div class="alternate-background">I have a red background</div>
</div>
which would allow you also to use this:
<div class="alternate-background">I want a red background!</div>