I have a bunch of divs like this
<div id="parentDiv">
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
</div>
is there some way using only CSS that I could show the current index to the left of the childDiv elements and it automatically update if I were to shuffle them around using jQuery or would I have to to manipulate the child div using jquery ?
Or
One of the other ways I was thinking to handle it would be to change them to ol li but then I need them to be zero based and I haven't see any thing in css to do that either
You can use CSS counters:
#parentDiv {
counter-reset: index; /* Create a `index` counter scope */
}
.childDiv:before {
content: counter(index) ". "; /* Display `index` counter */
counter-increment: index; /* Add 1 to `index` */
}
<div id="parentDiv">
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
<div class="childDiv">some content</div>
</div>
Related
I have a div with the class .box-container which can contain several div of class .legend-panel, I want to apply some style only to the first child which is not hidden in the box-container.
I'm new on scss so I arrived to target the first child but not more.
.legend-panel:first-child{
bottom: 2.5em;
}
thanks for helping.
You can achieve what you want with a mixture of nots and sibling selectors. The following assumes that you are using a hidden class to hide your elements
.hidden {
display:none;
}
.legend-panel:not(.hidden):first-child, /* this styles the first visible if it is the first child */
.legend-panel.hidden + .legend-panel:not(.hidden) { /* this will style thie first show following a hidden panel */
color:red;
}
.legend-panel:not(.hidden):first-child ~ .legend-panel,
.legend-panel.hidden + .legend-panel:not(.hidden) ~ .legend-panel { /* these will reset all following visible back to original */
color: initial;
}
<div class="box-container">
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel">
show - first
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel">
show - not styled
</div>
</div>
<div class="box-container">
<div class="legend-panel">
show - first
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel">
show - not styled
</div>
<div class="legend-panel hidden">
hide
</div>
</div>
EDIT
As #Pete pointed out, the :first-of-type pseudo selector only takes into account the type of element (e.g. div or li), it does not work with classes, so this answer is wrong.
You will have to specifically target the first div that is not hidden. I'm going to assume you hide the div's by adding a class hidden to them.
Using the :not pseudo selector, you can ignore elements, you can use this to ignore all .legend-panel elements that have the class hidden, then you can use the :first-of-type pseudo selector to only select the first of the non-hidden .legend-panel elements. That should be all!
This should be a working approach:
.box-container{
.legend-panel{
// Make all panels blue
background-color: blue;
&:not(.hidden){
&:first-of-type{
background-color: red; // This should be the one
}
}
}
// Or in 1 selector
//.legend-panel:not(.hidden):first-of-type{
// background-color: red;
//}
}
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>
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 want to use css3 nth-child to select matched elements based in their index in the whole document (like jquery :eq() selector) not based in the parent element.
<div id="container">
<div class="result">
<div class="active">content 1</div>
</div>
<div class="result">
<div class="active">content 2</div>
</div>
<div class="result">
<div class="active">content 2</div>
</div>
</div>
This css code select all elements because every .active is 1st child respective to the parent .result
.active:nth-child(1) {
background: red;
}
I tried also to make the body as parent
body > .active:nth-child(1) {
background: red;
}
But it can't do the job.
I want nth-child(1) selects content 1
and nth-child(2) selects content 2
I think you want to use nth-child on .result.
#container .result:nth-child(1) .active {
background: red;
}
JSBin
I have got a view like this using bootstrap2.3.1:
<div class="row-fluid">
<div class="span3">text1</div>
<div class="span3">text2</div>
<div class="span3">text3</div>
<div class="span3">text4</div>
</div>
When I filter this to only show the div with text2 I set the other divs display to none. But because the div with text1 is still first child the div with text2 has a left margin. How do I change this so it only puts margin-left: 0; to the first child with display block?
The view looks likes this when filtered:
<div class="row-fluid">
<div class="span3" style="display: none;">text1</div>
<div class="span3">text2</div>
<div class="span3" style="display: none;">text3</div>
<div class="span3" style="display: none;">text4</div>
</div>
The margin got removed to the first child by the following CSS from bootstrap:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
I think I should be doing something like this: (but than the right syntax)
.row-fluid [class*="span"]:first-child[display="block"] {
margin-left: 0;
}
Here is your bizzare selector (demo):
.row-fluid [class^="span"]:not([style="display: none;"]) {
margin-left: 0;
}
Howerever, currently it's not possible to select first-of-class, so this rule will be applied to all matched elements. I suggest you to switch Bootstrap classes (.spanX) when showing/hiding elements.