I'm using BEM and I would like to know how to "disable" a block (.element).
By disable I mean using a different CSS background to emulate a disabled state.
.element {
background-color: #FFF;
}
.element__title {
font-weight: bold;
}
<div id="test" class="element">
<div class="element__title">this is the title</div>
</div>
Should I create
.element--disabled {
background-color: #EEE;
}
and apply that to
<div id="test" class="element element--disabled">
What about the __title? I'm not sure if my approach is correct because I want to overwrite the entire block.
element--disabled will be just fine. For more info see https://en.bem.info/method/naming-convention/#modifier-name
Related
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
I am trying to make a player-card type page showing various attributes about the players in a meteor app. What I am struggling with is to find the web components and css that will enable me to build something like this?
I am using the Materialize.css framework, but thought just to the preloader class to create the ratings bars (strength etc)
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
Any help with this will be appreciated!
Assuming your main problem is with the progress bar, this should get you started:
https://jsfiddle.net/L23kwohq/
You could put that into a table for the view you proposed.
CSS
.progress {
height: 2.6em;
background-color: white;
}
.progress .determinate {
background-color: lightblue;
}
.amount {
font-size: 2em;
padding-left: 80px;
// Whatever other styles...
}
HTML
<div class="progress">
<div class="determinate" style="width: 70%">
<span class="amount">7</span>
</div>
</div>
Trying to select all labels inside an element except labels inside one child div. Tried two approaches but nothing seems to be working
.parentDiv *:not(.skipLabelsParent) label {
display: inline-block;
margin-bottom: 12px;
}
This is failing because * selects all parents including child elements of skipLabelsParent class and parents of labels inside.
.parentDiv label:not(.skipLabelsParent label) {
display: inline-block;
margin-bottom: 12px;
}
I am not sure why this is failing.
Any solutions other than this?
fiddle here
The fiddle contains just an example of situation. Don't take that as final case. Labels could be anywhere and at any level. I just want to
skip inside every skipLabelsParent class. I made that very clear in my
question. Please read question again and provide generic solution.
Else I will look for other approach.
I think the easiest way to do what you want, is to do some intelligent re-styling of the labels you want to skip with a good selector:
.parentDiv .skipLabels{/*your css here*/)
and style the child div with that selector. This would be the least amount of work.
Next, depending on how many labels we're talking about, is to add the class directly to the labels you want to skip so that the following code would skip the <label>'s with the class .skipLabels:
.parentDiv label:not(.skipLabels) {
display: inline-block;
margin-bottom: 12px;
}
If that isn't gong to work for you, then I think you should just override the the child div's styling right under the parent divs:
.parentDiv{
display: inline-block;
margin-bottom: 12px;
}
.skipLabels{
display: .....;
margin-bottom: ....;
}
This way, you can put the .skipLabels class anywhere and you will know the styling will take effect like you want.
I believe that it is not working because you cannot chain selectors in :not yet http://caniuse.com/#search=%3Anot
https://developer.mozilla.org/en/docs/Web/CSS/:not
Currently you can only use “simple selectors”
https://drafts.csswg.org/selectors-3/#simple-selectors
This works for example:
HTML:
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
.parentDiv label:not(.skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/19/
Whereas this selector breaks all together:
HTML:
<label>Pnoe</label>
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
label:not(.parentDiv .skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/20/
In your CSS you can define
.parentDiv > label{
color: red;
}
Thanks to the ">"-operator, only elements that are direct children of the element before are selected. In your case only the first label "Pnoe".
Given this nested div/label fragment:
div:not(.skipme) > label {
color: red;
}
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label>Pnoe</label>
<label>Pnoe</label>
<div>
<label>Nested Phoe</label>
</div>
</div>
<div class="skipme">
<label>skip me</label>
</div>
<div class="somediv">
<label>Phoe</label>
<div class="another-div">
<label>Phoe</label>
</div>
</div>
</div>
I know that we can import a css style into another css style. That's not the thing I'm going to talk about.
I want to create a css style that depend on other css style. In other word, I want to create my own cascading tree system. How can I do that?
For example, how I pictured it in my mind:
div.priceinfo { border: 1px solid gray; width: 200px; }
div.disabled { background-color: gray; color: 333333; }
div.shippinginfo { depend: div.pricebox; border-color: green; }
div.taxinfo { depend: div.pricebox; border-color: blue; }
so I can use it like this:
<div class="priceinfo"> ... </div>
<div class="shippinginfo"> ... </div>
<div class="taxinfo disabled"> ... </div>
but I do not want like this:
<div class="priceinfo shippinginfo"> ... </div>
<div class="priceinfo taxinfo disabled"> ... </div>
I know that the last way is possible, but I'm curious whether there's any way I can do something like the one I described earlier? Thanks for the help.
I think you have to see a LESS CSS for this. a LESS CSS provides a coding for CSS.
http://lesscss.org
<article class="tweet-inner">
<div class="text-wrapper">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</div>
</article>
I have the following repeating html structure.
As of now, I want to provide alternate rows with different background. The element which I want to color is class=text
I do the following in my css -
.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
background-color: #FF0000;
}
This does not work, I also tried -
.text:nth-child(even) {
background-color: #FF0000;
}
This is what works -
article.text:nth-child(even) {
background-color: #FF0000;
}
But I want the .text to be alternately colored, not the entire article.
This also does not work.
The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.
It should be:
article:nth-child(even) .text{
...
}
Because you have multiple article elements with a single .text DIV (your attempts select the nth .text child from article)
Try this
article:nth-child(even) .text {
background-color: red;
}
Js Fiddle
try this:
article:nth-child(even) .tweet .text {
background-color: #FF0000;
}