This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I want to make the line 3 containing img element also in green, how to do?
<div style="padding-top:5px;">
<div class="right">line 1</div>
<div class="right">line 2</div>
<div class="right">
<img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img>
</div>
<div class="right">line 4</div>
<div class="right">line 5</div>
</div>
.right {
background-color: red;
}
.right > img {
background-color: green;
}
fiddle
ps. the IMG element appears dynamically, it is not predictable ..
The solution with jquery >> solution
$("img.img-thumbnail").parents('div.right').css("background-color", "green");
jsfiddle demo
//HTML
<div class="wrapper">
<div class="right">line 1</div>
<div class="right">line 2</div>
<div class="right">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img>
</div>
</div>
<div class="right">line 4</div>
<div class="right">line 5</div>
</div>
//CSS
.wrapper{
padding-top:5px;
background-color: red;
}
.right {
width: 100%;
}
.image {
background-color: green;
}
Edit:
OP was ok with a jQuery solution, and managed to find that answer himself
$("img.img-thumbnail").parents('div.right').css("background-color", "green");
Alternativ solution is also;
$("img.img-thumbnail").parents('div.right').addClass('green');
//CSS
.green {
background-color: green;
}
Add the following css:
.right:nth-child(3) {
background-color:green;
}
http://jsfiddle.net/wqf9p56a/
Related
Okay, I want to position overlapping elements based on the order they appear in a list. So the first will not be translated, the second will be translated 60px, the third 120px, etc... This is just a simplified version of what I achieve. Also, in the example there are three elements, in real life I won't know how many elements there will be. This is variable.
Below is a simple snippet that can achieve what I want, but you can easily see the problem with this: way to many lines of css... So the question is, how to position something based on its order? I assume that I should do something with :nth-child(n)? But how can I use the order of the element (n) to calculate its position?
.wizard :nth-child(1) {
position: absolute;
width: 400px;
border-style: solid;
transform: translateX(calc(0 * 60px));
}
.wizard :nth-child(2) {
position: absolute;
width: 400px;
border-style: solid;
transform: translateX(calc(1 * 60px));
}
.wizard :nth-child(3) {
position: absolute;
width: 400px;
border-style: solid;
transform: translateX(calc(2 * 60px));
}
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
</div>
UPDATE:
This is what I really want (in the end), where the different steps are sliding in from right to left...
Don't use position:absolute and consider negative margin to create the overlap
.wizard {
display:flex;
margin:5px;
}
.wizard > div {
width:400px;
flex-shrink:0;
border-style: solid;
}
.wizard > div:not(:first-child) {
margin-left:-340px;
}
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
<div class="step" style="background-color: purple;">Step 4</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
<div class="step" style="background-color: purple;">Step 4</div>
<div class="step" style="background-color: lightblue;">Step 5</div>
</div>
Is JavaScript okay?
let wizard = document.querySelector(".wizard");
wizard_children = wizard.childNodes;
wizard_children.forEach(myFunction);
function myFunction(child, index) {
child.style.transform = "translateX((index*60)+'px')"
}
if you know in advance the number of .step that you have, then you can easily achieve this in scss using a for-loop:
$stepNumber: 3;
#for $i from 1 through $stepNumber {
.step:nth-of-type(#{$i}) {
transform: translateX(calc(#{$i - 1} * 60px));
}
}
Here is the jsfiddle.
If you don't know the amount of .step, then you will need to add some JavaScript to it.
it is actually quite simple:
If I have several children, I want .child to have margin-bottom: 10px;
if there is only one child, I don't want to have that margin
obviously:
Just adding another class to the container is not an option. CSS solution only
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
so first container's child should have no margin. The other examples should have a margin between each child
You can make use of the :first-of-type pseudo-class in conjunction with the :not negation pseudo-class, and set margin-top instead. This will only give the margin-top to child elements which have a preceding element, thus giving the separation effect you're looking for:
.container {
border: 1px solid black;
}
.child:not(:first-of-type) {
margin-top: 10px;
}
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
You can add a margin to each element after a previous one, so we only have margin-top if there is an element before.
.container {
border:2px solid;
margin:20px;
}
.child {
height:20px;
background:red;
}
.child + .child {
margin-top:10px;
}
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
Or remove the margin-bottom from the last element so when having only one element it will also be the last element:
.container {
border:2px solid;
margin:20px;
}
.child {
height:20px;
margin-bottom:10px;
background:red;
}
.child:last-child {
margin-bottom:0;
}
/* OR
.child:not(:last-child) {
margin-bottom:10px;
}
*/
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
This question already has answers here:
CSS selector for first element with class
(23 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
I can not manage this situation:
<div class="list">
<div class="bar">
<header></header>
<div class="content"></div>
</div>
<div class="item">
<header></header>
<div class="content"></div> //select this
</div>
<div class="item">
<header></header>
<div class="content"></div>
</div>
</div>
CSS
.list > .item:first-child .content {
border-color: red;
}
I tried many solutions:
.list > .item:nth-of-type(1) .content { border-color: red; }
.list > div.item:first-child .content { border-color: red; }
.list .item:first-child .content { border-color: red; }
but no any result.
Quick note. The :nth-of-type selector selects only tags for now.
The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings.
If I understand correctly, you are looking for this:
.list > div:nth-of-type(2) .content {
border: 1px solid;
border-color: red;
}
<div class="list">
<div class="bar">
<header>Head</header>
<div class="content">
Content 1
</div>
</div>
<div class="item">
<header>Head</header>
<div class="content">
Content 2
</div>
</div>
<div class="item">
<header>Head</header>
<div class="content">
Content 3
</div>
</div>
</div>
On a different note, you need to set the border-width and border-style to make sure the border is displayed.
I am trying to apply a style to a div based on its parent class. I am using the :not() selector to select the div whose parent is not .container1, the second div should be red, but it's not working.
Example 1
.myDiv:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Example 2
.myDiv:not(.container1 .myDiv) {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Is this even possible with CSS? Or is my syntax just off?
You're selecting wrong elements. No reverse lookups possible, see here:
div:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Ideally, you'd group those parent divs under the same class in order to avoid the super-generic div selector:
.container:not(.container1) > .myDiv {
color: red;
}
<div class="container container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container container2">
<div class="myDiv">Div 2</div>
</div>
CSS can't do "parent lookups" like that. You would need to reverse the structure to something like:
.my-container:not(.container1) .myDiv
Granted, you would need to add the shared my-container class to all "parent" divs of interest.
I'm trying to wrap some column style divs in a row. Then apply overflow:hidden; to the row to make whatever floated columns are in the next row line up.
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
<div class="row">
<div class="col">Column 3</div>
<div class="col">Column 4</div>
</div>
<div class="row">
<div class="col">Column 5</div>
<div class="col">Column 6</div>
</div>
Then use:
.row{ overflow:hidden; }
.col{
width:50%;
float:left;
}
The problem is, on a larger screen I want to effectively move the row divs so I can show 3 columns:
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
<div class="row">
<div class="col">Column 4</div>
<div class="col">Column 5</div>
<div class="col">Column 6</div>
</div>
And use:
.row{ overflow:hidden; }
.col{
width:33%;
float:left;
}
Now, I know this can't be done in CSS, but are there any other ways for wrapping columns or getting this effect using CSS which I can use? The best I've come up with is a rather ugly version using extra elements:
http://codepen.io/djave_co/pen/EIHzt
If you resize the screen you can see its working, but its not very neat or semantic.
Do you want to achieve something like that? -> http://codepen.io/anon/pen/LwutG
CSS
.clear {clear: both;}
.col{
border:2px solid #eaeaea;
min-height:20px;
margin-bottom: 10px;
width:100%;
float:left;
box-sizing:border-box;
}
#media screen and (max-width:1400px) {
.col {
width: 33.333333%;
}
}
#media screen and (max-width:800px) {
.col {
width: 50%;
}
}
UPDATE
Set height equal on all cols. http://jsfiddle.net/C86b8/