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.
Related
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
For setting a border line between elements, I use border on one side for each child, except the last one. For example
<div class="parent">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
with CSS
.parent div{
display:block;
padding:5px;
border-bottom:dashed 1px #000}
.parent div:last-child{
border-bottom:dashed 0 #000
}
Is there a way to set the border between children from parent's CSS style? without using last-child. In other words, in one single statement from parent rule.
No, the border is a property of the child element, and thus can only be specified on them. You can use a single rule for this, but it requires advanced CSS3 selector support:
.parent > div:not(:last-child){
border-bottom: dashed 1px #000;
}
I just know a workaround: use jQuery and iterate through those child elements(each: http://api.jquery.com/each/) and set your css class if next(next: http://api.jquery.com/?s=next) element is also child...
I think another way, just using css does not exist, but I'm not sure, if you find a solution with css only, please post it ;)
Greetings
I have website
http://yournextleap.com/fresher-jobs
Please find out last div having HTML
<div data-recommendation="" data-id="3790" data-guidance="" data-bucket="jobs">
<div class="inn">
/* Some code*/
</div>
</div>
.inn having dashed bottom border
and it's parent div is dynamically generated
What I want:
The last DIV .inn must have border: none;
for That I tried :last-child
I don't want to use JS or Jquery
I added class for main div (temporarily I removed it); Now ther is only <div>
it was
<div class="main">
that's it, Here was my css
.main:last-child .inn{
border: none;}
But it's not working
Here's what I'm assuming you had:
<div class="main">
<div data-recommendation="" data-id="3790" data-guidance="" data-bucket="jobs">
<div class="inn">
/* Some code*/
</div>
</div>
</div>
If that's the case, you need:
.main div:last_child .inn {
border:none;
}
Hey i have tested and made the following changes in your css
div.hero-unit div.recommendation + div div:last-child div.inn {border:none !important;}
It works in Firefox and Chrome i am testing the same for IE This will work only in IE 9+ browsers IE 7 and IE 8 will not support this CSS selectors.
will explain the pattern here.
div.hero-unit is to select the parent div
div.recommendation is to select the child inside div.hero-unit
+ div will select the immediate next div
div:last-child will select the last child inside the div the one we have selected in point 3
div.inn setting the property border:none with !important so that the other borders are not applied because border:none will be given the highest priority due to !important.
Hope it helps to every read.. Best of luck
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do?
> selects immediate children
For example, if you have nested divs like such:
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
and you declare a css rule in your stylesheet like such:
.outer > div {
...
}
your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.
div {
border: 1px solid black;
padding: 10px;
}
.outer > div {
border: 1px solid orange;
}
<div class='outer'>
div.outer - This is the parent.
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
</div>
<p>Without Words</p>
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
Side note
If you, instead, had a space between selectors instead of >, your rules would apply to both of the nested divs. The space is much more commonly used and defines a "descendant selector", which means it looks for any matching element down the tree rather than just immediate children as the > does.
NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.
If you're looking into less-well-used CSS selectors, you may also want to look at +, ~, and [attr] selectors, all of which can be very useful.
This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.
> selects all direct descendants/children
A space selector will select all deep descendants whereas a greater than > selector will only select all immediate descendants. See fiddle for example.
div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */
<div class="a">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>
<div class="b">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>
It is the CSS child selector. Example:
div > p selects all paragraphs that are direct children of div.
See this
As others have said, it's a direct child, but it's worth noting that this is different to just leaving a space... a space is for any descendant.
<div>
<span>Some text</span>
</div>
div>span would match this, but it would not match this:
<div>
<p><span>Some text</span></p>
</div>
To match that, you could do div>p>span or div span.
It is a Child Selector.
It matches when an element is the child of some element. It is made up of two or more selectors separated by ">".
Example(s):
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
Example(s):
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
It declares parent reference, look at this page for definition:
http://www.w3.org/TR/CSS2/selector.html#child-selectors
It means parent/child
example:
html>body
that's saying that body is a child of html
Check out: Selectors
<style>
div#b {
background-color:blue;
}
#b {
background-color:red;
}
</style>
<div id='a'> div a
<div id='b'>
div b
</div>
</div>
I have two questions with this style and this html. Why does div b takes blue color. I want to know the cascading rules where i can learn more about it? My Second question is what should i do with css to make div b appear inside div a?
CSS Selectors work on specificity. More specific selectors mean that the rules defined within that selector are going to be used in favor of a less specific selector.
As a rule:
element selectors such as div, img, etc carry a weight of 1
class selectors such as .myClass carry a weight of 10
id selectors such as #myId carry a weight of 100
From this you can pretty easily determine why the above failed.
div#b = 101
#b = 100
101 > 100
div#b is more specific than #b because you have an element selector. The first selector specifies what kind of element to look for, whereas the second one says it doesn't matter as long as it picks up that ID.
div#b means
Find only a div whose ID is b.
while #b means
Find any element whose ID is b.
Therefore by specificity, the first rule overrides the second rule.
I don't understand what you mean by making #b appear inside #a, it looks fine to me the way your HTML is structured. On the other hand, you don't have any CSS rules for #a, so there's only background color for #b.
EDIT: if you want the appearance of a box inside another box, give the outer box some padding, and of course a background color:
#a {
background-color: yellow;
padding: 1em;
}
For some css rule references see:
http://css-tricks.com/specifics-on-css-specificity/
http://htmlhelp.com/reference/css/structure.html#syntax
Use display: inline to make div b appear inside a:
<style>
div#b {
background-color:blue;
display: inline;
}
#b {
background-color:red;
}
</style>
<body>
<div id='a'> div a
<div id='b'>
div b
</div>
end div a
</div>
The issue with "my divs appear as lines" is because the width of the inside div is the same as the width of the outside div (default).
Try the following:
<style>
div.inside
{
background-color: red;
padding: 5px;
}
div.outside
{
background-color: green;
padding: 5px;
}
</style>
<div class="outside">
This is text in the outside div.
<div class="inside">
inside
</div>
</div>
You should see a thin line of green (about 5px wide) on the left, right, and bottom of the inside div.
This is not the only way to get this effect.