div.test:hover #sendBtn{
color:red;
}
This works fine is sendBtn is INSIDE the div.test element
But how to achieve this (pure CSS) when it is outside ?
ex:
<button id="sendBtn">hello</button>
<div class='test'>div here</div>
There is no selector for previous element in css but you can change the order of the elements and use adjacent sibling selector:
html
<div class='test'>div here</div>
<button id="sendBtn">hello</button>
css
div.test:hover + #sendBtn {
color:red;
}
fiddle
Related
css doesn't select the first class
:not(:first) doesn't work because .callout is wrapped by other container
.callout:not(:first) {
color: red;
}
<div class="d-flex">
<div class="flex-fill">
<div class="callout">
Text A
</div>
</div>
<div class="flex-fill">
<div class="callout">
Text B - only this set color red
</div>
</div>
</div>
Select the .callout element whose parent is not the :first-child of its parent element
.flex-fill:not(:first-child) .callout {
color: red
}
Or just revert the logic and target the :last-child
.flex-fill:last-child .callout {
color: red
}
Or target the .callout inside the second parent element, no matter how many .flex-fill siblings you have
.flex-fill:nth-child(2) .callout {
color: red
}
Codepen example
Anyway, I don't recommend to use this kind of selectors or to rely on a specific markup structure because this approach can easily cause maintainability problems as the code grows and, if possible, I'd suggest to place instead a specific class for this purpose on the right element.
Essentially what I am trying to do is have one element react as the hover state of a different element.
.page-template-page-services-new .imgBlock:hover { .page-template-page-services-new .ButtonService {color: #6395ce; background-color: #fff; } }
Not currently working - is this a thing? If not, how might I accomplish it. I know the selectors are correct, they work independently.
What I think you are referring to is that you've seen something akin to
.selector-one{
//style definitions
.selector-two{
//other style definitions
}
}
This comes from pre-processors such as SCSS (Sass) or LESS, I'll assume you can do a quick google on those.
For the other part of your question, yes, you can style an element differently if it's parent container or even a sibling is hovered.
Example
.container-hover:hover .red-on-hover{
background-color:red;
}
.sibling-hover:hover + .sibling-hover{
background-color:blue;
}
<div class="container-hover">
<h3>Other Text</h3>
<div class="red-on-hover">Background will turn red on hover</div>
</div>
<p class="sibling-hover"> When I am hovered, my sibling will be blue</p>
<p class="sibling-hover"> Blue? Blue</p>
For the sibling hover, please note that if you added more .sibling-hover elements that all but the first one would be able to turn blue if you hovered over it's immediately prior sibling.
It can work if they have a parent child relationship.
.page-template-page-services-new {
background: #ccc;
}
.page-template-page-services-new .imgBlock:hover .ButtonService {
color: #6395ce;
background-color: #fff;
}
<div class="page-template-page-services-new">
<div class="imgBlock">
<img src="http://placehold.it/100/100" alt="">
<div class="ButtonService">
<p>
This is a test
</p>
</div>
</div>
</div>
The snippet below is a part of a much larger structure with many .step elements.
I need to match all .stepText elements that are next to .stepTitleAndImages ul.standard
In other words, match all .stepText elements that have .step parent that has .stepTitleAndImages child that has .stepImages.standard child
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages standard"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?**
<div class="clearer"></div>
</div>
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages medium"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div>
<div class="clearer"></div>
</div>
PS: I cannot modify the HTML. Cannot use anything other than pure CSS.
Just use this for selecting first case
.step:nth-child(1) .stepText {
... Your CSS here
}
For second one use
.step:nth-child(2) .stepText {
... Your CSS here
}
For selecting both use
.step .stepText {
... Your CSS here
}
Then you should require jquery for that
Selecting Parents sibling is not possible only with pure CSS yet, You can achieve this by a single line of jquery:
$('ul.standard').parent().siblings(".stepText").css(...your CSS here);
This cannot be done with your HTML structure and with pure CSS. The closest solution to your problem, changing the HTML structure and with pure CSS, would be to move the standard class to its parent tag:
<div class="stepTitleAndImages standard">
<h3 class="stepTitle"></h3>
<ul class="stepImages"></ul>
<div class="clearer"></div>
</div>
This would allow you to use the adjacent sibling selector (+), which matches the second selector if it's the direct next sibling of the first, like this:
.stepTitleAndImages.standard + .stepText {
/* Styles */
}
A more flexible approach would be to use the general sibling selector which would match any sibling preceded by the first selector, not only the direct next one:
.stepTitleAndImages.standard ~ .stepText {
/* Styles */
}
The :has pseudo-class is in development by Mozilla, but it hasn't hit any stable browsers yet. With it, and with your HTML structure, you could go:
.stepTitleAndImages:has(.standard) + .stepText {
/* Styles */
}
Unfortunately, currently you can't solve this in any other way with CSS (and with your HTML structure) only.
I have :
<div class=mystyle>
<input type=checkbox>
<div>
<div>
<div>
.....
</div>
</div>
</div>
<div>// this is what I want
</div>
</div>
I want to create a css style to be applied to the last div at the same level of element or also can be the second div ...
I think I could use [attribute] approach but... Is there any way to use another selector ?
It is possible I could have more than one input-div-div structure inside mystyle input:checked ?
you may use
input ~ div:last-of-type {
color: green;
}
this selector will pick the last sibling div of your input
example: http://codepen.io/anon/pen/pvwEoB
Sure this is a too easy question but incredibly I did not understande why this code does not run as desired.
HTML:
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
CSS:
div:not(.remember) .foo
{
color:red;
}
Here the JsFiddle.
I would like that every item with class .foo OUTSIDE a parent with class .remember will be red, but it seems that "not" clause does not fire.
Where is my error?
Your upper most <div> doesn't have .remember, it passes your selection and so .foo has styles changed. Use the child combinator.
Your selection requires that the parent that isn't .remember is also a <div>, because you haven't given your second .foo a parent, in this case, its parent will be <body>. If you don't make this restriction, it is black in colour, as expected.
:not(.remember) > .foo {
color:red;
}
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
Here is a working jsfiddle
The a.foo was not inside a div, it is fixed. The div:not(.remember) .foo expects the link to be inside of a div.
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be inherited)</a>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
</div>
There was no style for div.reminder .foo, it should specifically inherit from the parent style.
div:not(.remember) .foo
{
color:red;
}
div.remember .foo { color: inherit; }
In the above fiddle, I added the first line which should represent any styles already set to the page (parent containers and etc). Its purpose is to play with it in order to see how the inner content behaves. You can remove it safely, the behavior will be as expected.
The div.remember .foo will simply inherit them rather than force something else. However
a.foo{color:red;}
.remember a.foo{color:black;}
This will cause all .foo elements to be red, unless it is nested inside the parent .remember, it will then be black.
http://jsfiddle.net/92gnt7qt/