This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I have DOM like this
<div class="outer">
<div class="inner">
</div>
</div>
and corresponding CSS is like
.outer {
width: 700px;
}
, where inner could by typeA, typeB.....
Later I found that I want to enlarge outer when particular typeX show up, but
.outer .typeX {
width: 90%;
}
will apply style width: 90% to .typeX div not .outer div. How do I solve this? Is it possible in pure CSS? (Assume .outer is fixed since it is generated by other library)
Unfortunately, what you are looking for would be a parent selector, which does not yet exist in CSS.
Maybe someday (e.g., in Selectors Level 4).
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I'm trying to affect an outside element when a div is hovered. Something like this:
<div class="affected">
Hi
</div>
<div>
<div class="hover-me"></div>
</div>
CSS:
.hover-me:hover ~ .affected {
color:
}
I've tried with other sibling selectors but it doesn't work.
With pure CSS that's gonna be as tricky as it gets.
An approach, IF you don't need pointer-events (hover, clicks, etc) on the div that contains the hoverable child, is setting the container as actionable div, disabling pointer-events, resetting them on the child, and using some sort of magic to have the siblings in reverse order on your HTML so they can be targeted with sibling selectors (as you cannot target previous siblings)
Something like
body{
/*switches the oder of .affected and .hover-container, so .affected can be bellow in the HTML and be targeted with sibling selectors, while showing above*/
display:flex;
flex-direction:column-reverse;
}
.hover-container:hover ~ .affected{
/*targets the action on the container*/
background:red;
}
.hover-container{
/*disables pointer-events on the container, so entering it won't cause the hover effect on the sibling*/
pointer-events:none;
}
.hover-me{
/*resets pointer-events on the .hover-me child, so the previous :hover we set for the container will work only when hovering this child*/
pointer-events:auto;
cursor:pointer;
}
div{
border:2px solid grey;
margin:20px 40px;
text-align:center;
}
<div class="hover-container">
this is the hover container
<div class="hover-me">hover me</div>
</div>
<div class="affected">
affected
</div>
But that's probably a not so common scenario, at that point you'll be better off with a JS approach.
This question already has answers here:
How can I remove CSS element style inline (without JavaScript)?
(6 answers)
Closed 6 years ago.
I have a div that looks like this:
<div class="wtHolder" style="width:41.66%; height:150px; position:relative;">
Is there something I can add in css for the wtHolder class that will remove width:41.66% of this?
(If you want the background of why I need to do this, see this question.)
yes you can use !important to overwrite it:
.wtHolder {
width: 100px !important;
}
It's a trick , but you can actually use !important
.wtHolder{
width:100% !important;
background-color:black
}
<div class="wtHolder" style="width:41.66%; height:150px; position:relative;">
This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 6 years ago.
I'd like to have CSS that uses attr(data-attribute) to apply a CSS-rule.
For example, in my CSS:
#media max-width(480px) {
.mobile-float {
float: attr(data-mobile-float);
}
}
Then, in my HTML, I define the data-attribute:
<div data-mobile-float="right">
Floats right on mobile!
</div>
<div data-mobile-float="left">
Floats left on mobile!
</div>
I feel like I'm missing a character and it's not working. How do I do this correctly? Thanks!
you are using wrong selector in CSS try this
[data-mobile-float="left"]{font-size: 50px;}
<div data-mobile-float="right">
Floats right on mobile!
</div>
<div data-mobile-float="left">
Floats left on mobile!
</div>
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 7 years ago.
I have the following markup:
<div class="heading-container">
<p class="stroke">Who we</p>
<h2 class="section-title extreme-bold">Contact us</h2>
<p class="stroke"></p>
</div>
Now I can select the 1st .stroke using the following selector:
.heading-container .stroke:nth-child(1){
max-width: 200px;
}
but the The following does't work for the 2nd stroke class:
.heading-container .stroke:nth-child(2){
max-width: 200px;
}
but the following again works:
.heading-container .stroke:nth-child(3){
max-width: 200px;
}
Now why does the value 3 work for the 2nd nth-child slection?
For the 2nd nth-child is't the followig suppose to be appropriate:
.heading-container .stroke:nth-child(2){
max-width: 200px;
}
nth child, as explained here selects based on elements that are the nth child of their parents.
so 1 is working, because the first stroke is the first child.
3 works because the second stroke is the third child.
2 won't work, because there are no strokes that are 2nd children, just h2
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is this possible with css only? I have the following:
<div class="container">
<img src=#>
</div>
How do I get .container to have a box-shadow (and other styling) when and only when img is in the state :hover?
As people have stated there is no CSS parent selector, for a number of good reasons as stated in the linked duplicate question.
However, with the code you've shown, you can just apply the hover pseudo-selector to your parent element and it will achieve almost the exact same functionality.
So this:
div:hover{
border:1px solid red
}
Would work only because you have a single child, and would have the issue that if you hover adjacent to the img but not directly on it the parent will still have styles applied because its a block element.
You can convert it to inline-block to limit this, like so:
div{
display:inline-block;
}
div:hover{
border:1px solid red;
}
However, this will have implications for how other sibling elements to the parent flow.
You can use jQuery:
$("span").hover(
function () {
$(this).parent().addClass("add-class");
},
function () {
$(this).parent().removeClass("add-class");
}
);
Here is the demo http://jsfiddle.net/Sv6Av/
You can replace span with another tag such as img
Nope. No parent selector in css yet. You will have to resort to js for now. For more explanation read this