Can i select somehow a group of elements if a class of the parent changes. Like in these example.
The parent class can be alertStateTrue or alertStateFalse.
<div id="parent" class="alertStateTrue">
<div class="childAlertStateTrue"></div>
<div class="childAlertStateTrue"></div>
<div class="childAlertStateFalse"></div>
<div class="childAlertStateFalse"></div>
</div>
.alertStateTrue .childAlertStateTrue
{
display: block;
}
.alertStateTrue .childAlertStateFalse
{
display: none;
}
.alertStateFalse .childAlertStateTrue
{
display: none;
}
.alertStateFalse .childAlertStateFalse
{
display: block;
}
Yes, you can select elements based on their parents:
.a .b {}
The above rule will select all .b elements inside the .a ones.
HINT
You can compress your CSS by grouping the selectors which have exact rules:
.alertStateFalse .childAlertStateFalse,
.alertStateTrue .childAlertStateTrue {
display: block;
}
.alertStateTrue .childAlertStateFalse,
.alertStateFalse .childAlertStateTrue {
display: none;
}
This is called a parent child relationship in CSS structure, you can do as per NOX answer.
If you want to be a more specific than below structure will help you
Use your #parent div.childAlertStateTrue
This will work fine.
Related
I have a container and three parts in it. I want to make unvisible thirth part while addind class to the parent container. But my codes not works...
Here is the HTML code:
<section id="parts" class="two-parts">
<div id="partOne">...</div>
<div id="partTwo">...</div>
<div id="partThree">...</div>
</section>
Here is the SCSS code:
#partThree{
display: block;
.two-parts &{
display: none;
}
}
I want to hide #partThree div, when #parts div has .two-parts class.
Guys! I found the problem. I checked the output of Scss to Css, and here is the Css output:
.two-parts body #parts #partThree {
display: none;
}
It should be #parts.two-parts #partThree. But why is that goes to the top of all elements?
As I have answered in your other post:
It looks like your code is wrapped by a body-tag and a #parts-tag. This means you need to change your code to this:
#partThree{
display: block;
}
&.two-parts #partThree {
display: none;
}
The & takes EVERYTHING before the current line. So if your final SCSS is:
body {
#parts {
#partThree {
display: block;
.two-parts & {
display: none;
}
}
}
}
Then the & will add .two-parts before everything else, and make it:
.two-parts body #parts #partThree {
display: none;
}
The easiest way to achieve what you need is by setting .two-parts and #partThree as siblings, and apply ~ css operator.
<style>
#partThree {
display: block;
.two-parts ~ {
display: none;
}
}
<style>
<section id="parts">
<div id="partOne">...</div>
<div id="partTwo" class="two-parts">...</div>
<div id="partThree">...</div>
</section>
this will only work if #partThree and .two-parts siblings and .two-parts comes before.
I need to add different styles to an element when it has one specific class and other styles when it has that specific class plus another (not specific)
This is because this second class varies with the page
So far I've tried:
.page {display: none;}
.page[class=""] {display: block;}
or
.page {display: none;}
.page.* {display: block;}
Use a class selector to require that it has the class you want.
Use an attribute selector to require an exact match for the specific class attribute value (i.e. exactly matches a string).
Note the limitation that attribute selectors are sensitive to whitespace.
Such:
div {
margin: 1ex;
padding: 1ex;
border: dotted 1px #aaa;
}
.foo {
/* Includes foo */
background: yellow;
}
[class="foo"] {
/* Has *only* foo */
background: red;
}
<div>No class attribute</div>
<div class="">No classes</div>
<div class="foo">Foo</div>
<div class=" foo ">Foo + whitespace</div>
<div class="foo bar">Foo Bar</div>
<div class="foo baz">Foo Baz</div>
Note that class and attribute selectors have equal specificity so order matters.
You can use .page (for elements that have a class page) and [class="page"] (for elements that have only class page), but the order of the styles matter:
.page {
color: blue;
}
[class="page"] {
color: red;
}
/* order matters */
<h1 class="page">PAGE</h1>
<h1 class="page larry">PAGE, LARRY</h1>
To see why the order matters, check this:
[class="page"] {
color: red;
}
.page {
color: blue;
}
<h1 class="page">PAGE</h1>
<h1 class="page larry">PAGE, LARRY</h1>
.page overrides [class="page"].
.page {display: none;}
.page + * {display: block;}
I'm trying to only display the first element and hide all other elements.
Here is an example:
<style>
h1 {
display: none;
}
h1:first-of-type{
display: block;
}
</style>
<body>
<div class="content">
<h1>Test</h1> <!-- only this one should be visible -->
123
</div>
<div class="content">
<h1>ABC</h1>
def
</div>
</body>
Is there a solution without JS?
Using :first-of-type on h1 would not work, instead use that on the first .content's h1. Like so:
h1 {
display: none;
}
.content:first-of-type h1 {
display: block;
}
h1 {
display: none;
}
.content:first-of-type h1{
display: block;
}
<div class="content">
<h1>Test</h1>
123
</div>
<div class="content">
<h1>ABC</h1>
def
</div>
DEMO
.content ~ .content h1 {
display: none;
}
This is by what I know the shortest solution, it basicly picks all h1 elements expect the first one.
Explanation:
~ picks all siblings (elements) after the first .content class which have the .content class
If you want to read further W3 Schools with examplesW3 sibling combinators
Asking here since I can't pass a proper search query with that.
Here's a code sample:
[class*="button_type"].state_2,
[class*="button_type"]:not(.state_2):hover{
background-color:#fff;
}
Furthermore what would be the use of the :not suffix?
I cannot understand why it isn't just:
.button_type.state_2,
.button_type:hover { etc..}
[class*="button_type"] is CSS class Selector (equivalent to CSS attribute selector) means that will select all elements whose class contains at least one substring "button_type".
take a look at this example:
[class*="button_type"] {
background: red;
width: 50px;
height: 50px;
display: inline-block
}
<div class="button_type"></div>
<span class="one_button_type"></span>
<article class="button_type_final"></article>
Regarding the :not() that means it will select everything but that selector which is inside the :not()
Take a look at this example:
[class*="button_type"] {
background: red;
width: 50px;
height: 50px;
display: inline-block
}
[class*="button_type"]:not(.state_2) {
border: black solid
}
<div class="button_type state_1"></div>
<span class="one_button_type state_2"></span>
<article class="button_type_final state_3"></article>
I'm trying to style all div elements except those in two different class groups. Everything I've tried doesn't seem to work.
The below test code should make the div with "test" text content be orange, but none of the selectors work.
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not(.ZoomBar):not(.row.heading) {
background: orange;
}
div:not(.ZoomBar, .row.heading) {
background: orange;
}
div:not(.ZoomBar),
div:not(.row.heading) {
background: orange;
}
<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div>Test</div>
You can use something like this
You cannot add unfortunately multiple class in a single not selector.
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not(.ZoomBar):not([class="row heading"]){
background: orange;
}
<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div class="heading">Heading</div>
<div>Test</div>
The problem with :not() is that it only allows one simple selector at a time. This means any of :not(div), :not(.ZoomBar), :not(.row) and/or :not(.heading). It does not accept either
a compound selector, .row.heading, which consists of two class selectors; or
a comma-separated list of multiple selectors, .ZoomBar, .row.heading.
It's worth noting however that the selectors you've tried will work in jQuery, though not CSS.
Your problem is compounded (heh) by the fact that you're looking for both kinds of exclusions in a single rule. But it's still doable; it simply means you'll need to write a slightly more convoluted rule, with two selectors to account for the two class selectors in .row.heading:
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not(.ZoomBar):not(.row),
div:not(.ZoomBar):not(.heading) {
background: orange;
}
<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div class="heading row">Heading</div>
<div class="heading foo row">Heading</div>
<div class="heading">Heading</div>
<div>Test</div>
If these are the only possible combinations of class names, you might be able to get away with simply excluding div elements with a class attribute using div:not([class]), but based on your question I suspect that this isn't the case.
For instance, notice in the above snippet that the div[class="heading"] element matches div:not(.ZoomBar):not(.row), and is therefore colored orange. If you may have elements with either class name but not both, those elements will be accounted for.
The answer is this:
div {
height: 40px;
width: 100px;
background: cyan;
display: inline-block;
}
div:not([class*="ZoomBar"]):not([class*="row heading"]):not([class*="heading row"]) {
background: orange;
}
https://jsfiddle.net/ars9fL56/5/