Is it possible to style another element on :focus of a specific element?
Something like:
input:focus #header {
display: none;
}
I tried doing that but it didn't work.
Yes,it is possible if element is a sibling or a child to the :focus element. If it is not your case (affect whatever you want) than you should use javascript.
.input:focus #header
That is applying selecting all #header where they are a descendant of input
If its a sibling so you want, use the next sibling selector +:
input:focus + #header
For more information on child/sibling combinators
you can also use 'preceded by' selector -> https://www.w3schools.com/cssref/css_selectors.asp
HTML:
<button>button</button>
<div class="div1">div1</div>
CSS:
button:hover ~ .div1 {
color: red;
}
So you hover over the button BUT the div1 element gets styled.
Just make sure that the BUTTON element is first and the element you are styling is SECOND.
Related
I'm trying to get an item that is a pseudo element to change when the parent is hovered over. The pseudo element here is .child:after. I know this works:
.parent:hover .child {
background: #FF0000;
}
But this does not seem to work:
.parent:hover .child:after {
background: #FF0000;
}
Any ideas? Thank you!!
Try to add content:'' to ::after pseudo-class;
Also be aware that :after works with non-replaced elements (im, input, textarea, and so on) (refference: replaced elements.)
Additionally: pay attention to display property of .child:after selector.
Here you go with a working example https://jsfiddle.net/wq2edhf3/.
I know that with pure CSS it's impossible to select previous siblings of the element. But I try to fool browser with a complex selector.
Please see this jsFiddle. It contains several CSS rules that work fine except 2 of them:
//set border color to white for all elements before .selected and .selected itself
div:not(.selected ~ div) {
border-color: #fff;
}
//set border color to green for the element previous to .selected
div:not(.selected ~ div):nth-last-child(2) {
border-color: #0f0;
}
But seems that inside :not() sibling selector ~ doesn't work.
So there're 2 questions:
Is it expected that ~ doesn't work inside :not()?
Is there any work-around for such case?
EDIT:
The final idea is to make a nice hover effect with pure CSS like:
The hovered image is simply scaled, image to right of it could be found and styled easily but the left one... The example with divs is just an example.
:not() pseudo-class could not contain sibling selector.
http://dev.w3.org/csswg/selectors3/#negation
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.
http://dev.w3.org/csswg/selectors3/#simple-selectors-dfn
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
If you want to :
set border color to white for all elements before .selected and
.selected itself
I would suggest to default the border color to white and change it after .selected :
div {
display: inline-block;
border: 1px solid #fff;
width: 30px;
}
div.selected ~ div {
border-color: #000;
}
<div>A</div>
<div>B</div>
<div class="selected">C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
For the second rule :
set border color to green for the element previous to .selected
If you know wich one will be selected in advance, you can target the element before with nth-child() otherwise you will need some JS to select it.
An other approach if the .selected class is dynamicaly added would be to use the same mechanism (PHP, JS or other) to give a class to the privious element at the same time and apply CSS to that class.
It is possible since CSS Level 4.
https://www.w3.org/TR/selectors-4/
The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument.
Also it is changed from :not( <selector># ) to :not( <complex-selector-list> ) in https://developer.mozilla.org/en-US/docs/Web/CSS/:not#syntax in November 2018.
See browser compatibility for "Selector list argument" in https://developer.mozilla.org/en-US/docs/Web/CSS/:not#browser_compatibility.
i have 2 div elements in html :
<body>
<div id="one"></div>
<div></div>
</body>
I want to hide div elements after div with id="one" from CSS, I tried this :
#one:after{display:none}
This doesn't work any other way to do?
No, :after pseudo doesn't do that, you need to use
#one + div {
display: none;
}
Demo
And if you want to hide ALL div followed by #one you will have to use
#one ~ div {
display: none;
}
Demo 2
:after applies to generated content. You want the adjacent sibling combinator:
#one + * {
}
If you know the exact position of the child element (like in you case its 2nd child), you can use nth-child pseudo class
div:nth-child(2)
{
display:none;
}
Fiddle:http://jsfiddle.net/ankur1990/HDq2T/
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
I am trying to change the text colour of .foo when the user hovers over .bar and I am unsure how to do this with only CSS. I have tried using the CSS preceding element selector ~ but that did not work.
http://jsfiddle.net/847E2/
<div>
<p class="foo">Foo</p>
<ul class="bar"><li>Bar<li></ul>
</div>
.bar:hover~.foo {
color: red;
}
EDIT - My requirements have changed. I updated my HTML structure to make the .bar a <ul>
The sibling selector ~ doesn't select elements preceding it, just elements succeeding it. Thus, when hovering over the element .bar, the element .foo cannot be selected, as it is preceding .bar.
You could do something like this instead:
jsFiddle example
div:hover :not(:hover) {
color: red;
}
Basically, this is setting the color of the child elements to color:red when hovering over the parent, div. However, it will not be applied on :hover of the element you are on. This makes it seem as though the color is changing when you hover over the sibling element.
Here's a way to do it with CSS (no CSS3 needed):
div:hover p{
color: red;
}
.foo:hover{
color: black;
}
div:hover p.bar{
color: black;
}
jsFiddle example
The + selector is an adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
It doesn't matter if you use any element if have .bar class name.
NOTE: There is no "previous sibling" selector, that's why i change the elements order in the DOM.
.bar:hover + .foo {
color: red;
}
Demo http://jsfiddle.net/847E2/11/
Also can see: http://css-tricks.com/child-and-sibling-selectors/
Is there a "previous sibling" CSS selector?