Have worked example:
.hov:hover+.next+.result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
jsfiddle
When hover on first element the third element have result. Any shorthen version of + + if i need more + +, something like .hov:hover+div:nth-child(2) - but this not work.
+ is Adjacent sibling selector in CSS, so it requires both selector elements to be next to each other. Instead, you can use ~ which is General Sibling selector here, which doesn't require the two elements to be next to each other.
.hov:hover ~ .result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
There is no way to make what you want to do shorter. This is simply the way the selector works. The solution you proposed (element + next(3) or whatever syntax you whish to use there) does not exist.
Your selector has some issues if you change the structure of your HTML (for example add a paragraph in between). What you can do to make your code more reliable is answered by Nisarg and use the ~ selector to select elements.
Why not change the HTML and make it more reliable? What you are doing here is working for you maybe, but if you make changes to your HTML this CSS breaks. Try adding classes for all items you want selected. Don't worry if you have three or four classes on elements, that is completely normal.
.hov:hover {
color: red;
}
<div class="hov">hover</div>
<div class="next hov">next</div>
<div class="result hov">result</div>
Related
For markup such as:
<span class="location-title-container">
</span>
<div class="content-panel">
<div class="floor-left-panel"></div>
<div class="floor-right-panel"></div>
</div>
How do I select .floor-left-panel when hovering over .location-title-container?
You have to use a adjacent selector to get the element right after it.
Your selector would look like this:
.location-title-container:hover + .content-panel .floor-left-panel { … }
Just for your information, you should not use :hover on span tags.
They are not accessible by default. You should add some WAI ARIA role tags.
.location-title-container:hover + .content-panel .floor-left-panel {} is the selector you need.
The plus sign is used to select the next adjacent element in the DOM.
<td>
<div class="m"><span class="a1">1 Puolimas</span></div>
<div class="d">po <span id="timer1">2:25:10</span></div>
</td>
How to select "2:25:10" with css selector if i can't use (span[id=timer1]) because id could be different.
I have tried:
span.a1 ~ span
But this selector do not work.
You could try here: http://jsfiddle.net/cSQcT/
There is no way using CSS to navigate from a1 and get to timer. You cannot navigate backwards/up with CSS only downwards/adjacent. You'll need to use javascript or start from the top down like .d > span.
You can do it like this:
.m + .d > span { color: blue; }
Also check this for the + selector: CSS next element
However, you cannot go up one level (from the span.a1).
Your selector must start from the same or upper level.
My HTML:
<p>Doggies</p>
<p class="green_guys">Froggies</p>
<p>Cupcakes</p>
<p>Piggies</p>
An all inclusive sibling selector (as I wish it to be), when used to select green_guys' siblings, would select the doggies cupcakes and piggies.
Other Selectors:
The + selector (a.k.a. adjacent sibling selector) would only select the cupcakes:
.green_guys + p {
/* selects the <p> element that immediately follows .green_guys */
}
The ~ selector (a.k.a. general sibling selector) would only select the cupcakes, and piggies:
.green_guys ~ p {
/* selects all <p> elements that follow .green_guys */
}
There is no sibling combinator that looks backward or around, only the adjacent and general sibling combinators that look forward.
The best you can do is determine a way to limit selection only to these p elements with the same parent, and then select the p children that are :not(.green_guys). If the parent element has an ID of #parent, for example, you can use this selector:
#parent > p:not(.green_guys) {
/* selects all <p> children of #parent that are not .green_guys */
}
However the above will still match your p elements even if none of them have the class. It is currently not possible to select the siblings of an element only given the existence of said element (which is the purpose of a sibling combinator — to establish a relationship between two sibling elements).
Selectors 4's :has() will hopefully rectify this without the need for a preceding-sibling combinator, resulting in the following solution:
p:has(~ .green_guys), .green_guys ~ p {
/* selects all <p> elements that are siblings of .green_guys */
}
This will not match anything if none of the children of the parent element have the class.
Not that I am aware of. There isn't a siblings selector either.
This might work, though:
#parent_of_green_guys > p:not(.green_guys) {
foo: bar;
}
Or if you aren't looking for ps with class attributes:
#parent_of_green_guys > p:not([class]) {
foo: bar;
}
My scenario was a little different but I wanted to select siblings of an input element to display one while it was active and another if it was left invalid.
My html was like this and I was unable to select the invalid text.
<input name="importantAnswer">
<div class="help-text"></div>
<div class="invalid-text"></div>
I was able to get around it by embedding the siblings in an adjacent one and using child selectors on that.
<input name="importantAnswer">
<div class="messages">
<div class="help-text"></div>
<div class="invalid-text"></div>
</div>
.help-text, .invalid-text {
visibility:hidden;
}
.input:active +.messages > .help-text {
visibility:visible;
}
.input.invalid:visited +.messages > .invalid-text {
visibility:visible;
}
And it worked.
I actually found 3 ways to do this:
Solution 1
.parent > p:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/cafipun/edit?html,css,output
PROS: quick and easy.
CONS: you need to know the parent selector (so that's not a super portable solution).
Solution 2
p ~ p:not(.green_guys),
p:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/seripuditu/edit?html,css,output
PROS: there is no need to know the parent selector (it can be very good to be used in generic cases).
CONS: it risks to be too generic (be careful, for example, if you have other p around your HTML!).
Solution 3
Small variant of the Solution 2 (to avoid the CONS). In this case you specify the sibling selector to get a more specific context.
p.siblings ~ p:not(.green_guys),
p.siblings:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/hakasek/edit?html,css,output
PROS: it is a portable solution, there is no need to know the parent selector (it can be very good in generic cases) and there is no worry to have conflict with other elements.
CONS: all siblings have to be well defined (with a class or an attribute for example).
So I want to rig up some css rules for interview transcripts. The format I have in mind looks something like this:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>
<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>
I'd like the paragraph to be a particular colour based on the class of the preceeding heading. Is there a way to do this, as it would make the html markup significantly simpler.
You can use following-sibling combinator: +
h2.interviewer + p { /* style goes here */ }
Sure:
h2.interviewer + p {
color: red;
}
I'm not entirely sure how to do it with multiple paragraphs though. Perhaps if you encased the entire set of paragraphs in a div:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
<p>Is it ok if I ask you a question now?</p>
<p>More text here.</p>
</div>
<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
<p>Sure go ahead.</p>
</div>
You could then do this:
h2.interviewer + div {
color: red;
}
By the way, there are better HTML elements for displaying a conversation, like the newly introduced <dialog> tag
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
UPDATE:
The <dialog> element never made it into HTML5. It does not exist.
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".