I have a div that looks like this
<div class='normal-select'>....content</div>
<div class='indicators'>....content</div>
<div class='multi-select'>....content</div>
// hide the indicators below
<div class='indicators'>....content</div>
Then using styled-components/sass I want to hide the indicators that are next to the div with the multi-select class name.
I have tried the following in my styled-component but unfortunately it doesn't work.
.multi-select {
+ .indicators {
display: none;
}
}
can anyone explain what I need to do?
Working example
.multi-select~.indicators {
display: none;
}
<div class='normal-select'>....content a</div>
<div class='indicators'>....content b</div>
<div class='multi-select'>....content c</div>
// hide the indicators below
<div class='indicators'>....content d</div>
Related
Hello – I would like to show content in a div based on the content in another div. For example, if sibling1 is empty, I would like to hide sibling2 (in parent1 below). If sibling1 has content, I would like to show sibling2 (parent2 below). I'd prefer to be able to do this with CSS, is this possible? If not, I can work with a simple javascript suggestion as well.
<!---hide sibling2--->
<div class="parent1">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent2">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
.parent {
height: 100px;
border: 1px solid;
}
.sibling1 { background: green; }
.sibling2 { background: red; }
.sibling1:empty + .sibling2 { display: none; }
<!---hide sibling2--->
<div class="parent">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
Imagine the following HTML:
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>
Now, we all know that we can use CSS to make this a two-column table:
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.contestant, .score {
display: table-cell;
}
This will render the contestant’s name and country within one cell, and the score in another.
What I want is to be able to have three columns, with the name, country, and score, but without changing the HTML. Is this possible?
In other words, ideally, I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.
I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.
This is what display:contents; will do (https://caniuse.com/#feat=css-display-contents)
causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.score,
.name,
.country{
display: table-cell;
padding:10px;
}
.contestant {
display:contents;
}
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>
How can I select multiple IDs in CSS? For example:
#test_id_*{
}
<div id="test_id_10"></div>
<div id="test_id_11"></div>
Use an attribute selector
on the id attribute:
[id^='test_id_'] { color: red; }
Description:
[attr^=value] represents an element with an attribute name of attr and whose first value is prefixed by "value".
To use one css for multiple id or class, you need to separate them with ,
#test_id_10,
#test_id_11
{
//some style
}
If you want add same style to multi div, it's better to use class, but if you have your own reason for this, the better way is to wrap all your div's on one div:
<div class="wrap">
<div id="id1">
<p>
First Div!
</p>
</div>
<div id="id2">
<p>
Second Div!
</p>
</div>
<div id="id3">
<p>
Third Div!
</p>
</div>
</div>
and set your style like this in your CSS:
.wrap > div {
color:blue;
}
If they have the same style, then why can't they have the same class?
.iknow{
width: 50px;
height:50px;
background-color: aqua;
border: 1px solid red;
display: inline-block;
}
<div id="test_id_10" class="iknow"></div>
<div id="test_id_11" class="iknow"></div>
<div id="test_id_12" class="iknow"></div>
<div id="test_id_13" class="iknow"></div>
<div id="test_id_14" class="iknow"></div>
<div id="test_id_15" class="iknow"></div>
<div id="test_id_16" class="iknow"></div>
<div id="test_id_17" class="iknow"></div>
<div id="test_id_18" class="iknow"></div>
<div id="test_id_19" class="iknow"></div>
<div id="test_id_20" class="iknow"></div>
<div id="test_id_21" class="iknow"></div>
You have to pass it like following
#test_id_10,#test_id_11{
}
You can separate them by commas to apply css on multiple ids.
<div id="test_id_10"></div>
<div id="test_id_11"></div>
You can select them by:
#test_id_10, #test_id_11 {
// your css values
}
#test_id_10 { //your styling }
Here is the basics in W3 schools https://www.w3schools.com/cssref/sel_id.asp
How can I write a CSS Rule that selects all div.box that are not inside .container?
The following snippet is not working because there is a div without .container inside the div.container.
div:not(.container) .box {
background:red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
If you do not want to override every attribute, the only way I see is to give an additional class to the boxes inside of the specific container.
.box:not(.exclude) {
background: red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
In a way, the CSS rule you are asking for is sort of backwards. You should start with the most generic rules, and then add more specific ones. In your case, you should do something like the following:
/* Generic Box styles */
.box
{
border: 1px solid black;
}
/* Boxes in a container */
.container .box
{
color: blue;
}
<div class="box">Generic Box</div>
<div class="container">
<div class="box">I'm in a container</div>
</div>
Select all div.box or all div not inside .container? What you ask for and what you say you want selected in the html code sample are not the same thing. That said, your css selectors are just out of order. Try:
div.box:not(.container) {
background:red;
}
and
<div class="box">box</div>
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div>
If you want all the divs, just remove the .box
I have this structure:
<div clas="page_cat_list">
<div class="page_cat_row">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="clear_fix"></div>
</div>
<div class="page_cat_row">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="clear_fix"></div>
</div>
</div>
this displays 3 items in a row, but I need the page_cat_list 100% width, and as many items they fit in the row dinamically.
I used:
.clear_fix {
display: none;
}
that`s ok, and
.page_cat_row{
display: inline;
}
this way I have as many items as they fit in the row, but they are aligned left, I tried:
.page_cat_row, page_cat_list {
text-align: center;
}
but is not working
the best solution should be to eliminate the .page_cat_row element, from CSS if possibile, because I have no access to html.
It is supposed to behave like this:
<div clas="page_cat_list">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
</div>
.page_cat_item is a div and by default 100% width so you need to center align content inside this div not the whole this
.page_cat_item {
text-align: center;
}
Also the css you were using is having an error
.page_cat_row, page_cat_list {
text-align: center;
}
In your above css you need to define . for both classes not just for first
This is correct
.page_cat_row, page_cat_list {
text-align: center;
}