Is there some way how to check if sibling's child has some class and stay in current element?
E.g.:
<div>
<div className="element">
<div className="child">
</div>
</div>
<div className="element">
<div className="child expand">
</div>
</div>
<div className="element">
<div className="child">
</div>
</div>
</div>
If element "child" has class "expand" I wanna change e.g color of all elements "element".
Currently the only way to do it with SCSS is with :has(), which as mentioned is not well supported yet. At the time of answering, it's only Firefox, Firefox for Android and Samsung Internet that do not support it (according to MDN).
It would look like this:
.element:has(.expand) {
color: red;
}
You can't do that directly in SCSS because it's a preprocessor language with no access to the DOM. To accomplish this, you would need to use JavaScript.
Related
I have a class that is used in multiple divs
<div class="wrapper">
<div class="child1">
...
</div>
</div>
<div class="wrapper">
<div class="child2">
...
</div>
</div>
<div class="wrapper">
<div class="child3">
...
</div>
</div>
Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?
Right now, you can only achieve the behaviour you want using JavaScript.
Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.
However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!
In my html file, I wrote the code like this,
<body class="sign-in-body">
<div class="container sign-in-container">
<div class="row">
<div class="col"> </div>
<div class="col-8">
<div class="card">
<div class="card-block">
This is some text within a card block.
</div>
</div>
</div>
<div class="col"> </div>
</div>
</div>
I want to add a margin-top: 15% to my container class. To do that I wrote,
div.container.sign-in-container {
margin-top: 15%;
}
But the problem is if I add just,
.container.sign-in-container
it works.
Why is that?
The selector .container.sign-in-container will select any element that has both container and sign-in-container classes.
But div.container.sign-in-container will select only the div elements with both of the css classes.
Since you have only a div with both classes, both of the selectors work.
You should probably read about css selectors. This is a good reference to start.
In css you add only one class for css not necessary to add div.container.sign-in-container. This is also work in one class .sign-in-container. If you want to override css then you can use parent of div.
You are using a class level CSS selector. It will work. You can have multiple kinds of selectors and combinators in CSS to target the element on your page.
With your example
div.container.sign-in-container
div.sign-in-container
div.container
.container.sign-in-container
.container
.sign-in-container
all are going to target the same div, that is why it works.
How to organize the HTML structure and apply CSS. Which does not conflict with others CSS.
Which is the better way to apply the CSS to the targeted element?
Way 1:
.PARENT_1 .CHILD:first-child {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Way 2:
.PARENT_1_CHILD_1 {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD PARENT_1_CHILD_1"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Any other way to improve CSS Specificity?
Can I use Bem Methodology?
If you want to apply CSS only to one element at a time, use an id for the element e.g.
if you target only one element wrapped inside a div, you can write it down in css like this: #divname > #something.a (when #something.a is first element inside the wrapper div) OR**
simply #divname #something.a - this will find the element with id anywhere inside the wrapper div.
Hope you got the point. :)
Here are css Methodologies you can find a depth explanation:
Examples of CSS Methodologies:
OOCSS, SMACSS, Idiomatic CSS and BEM
Title CSS Simple Approach CSS Class Naming
Lets says I am creating a component "Component" and its children or modifier.
BEM style would be
<div class="Component Component--modifier">
<div class="Component__child"></div>
</div>
I'd like write it as this way
<div class="Component Component--modifier">
<div class="_child"></div>
</div>
In CSS, I would strictly write _child class inside Component scope so there isn't any globle _child class.
I wonder what potential risk or cons my style guide would cause?
You can't.
An example:
<div class="MyRoundedBlock MyRoundedBlock--blue">
<div class="_title"></div>
<div class="OtherBlock">
<div class="_title"></div>
</div>
</div>
CSS:
.MyRoundedBlock ._title {
/* This rule applies to your OtherBlock's title too! */
}
I have an html element that can have either a child with id='slideshow'
<div id='content'>
<div id='slideshow'>
</div>
</div>
or a different child
<div id='content'>
<div id='other'>
</div>
</div>
I want to apply a style to #content only if it has a child #slideshow.
Is it possible?
Unfortunately this is not (yet?) possible in CSS alone. You can however do it with a couple of lines in jquery or almost any other javascript framework.