Imagine this html structure:
<p><a></a></p>
<div><a><img></a></div>
I want to hide all images inside a div after a p tag, to do that, I simple use this code:
p + div {display:none;}
but when I try to show those images by hover the anchor inside the p tag before, it doesn't work the same way by using this:
p > a:hover + div {display:block;}
if I use only p instead:
p:hover + div {display:block;}
it works, but it's not what I pretend.
Since a it's a child of p tag, adjacent sibling "+" doesn't work?
Since a it's a child of p tag, adjacent sibling "+" doesn't work?
Correct. The div is a sibling of the p, not the a.
You could set pointer-events for the p to "none", and pointer-events for the a to "auto".
You could then use your working p:hover + div code, but it would act like it's working for the anchor only:
p + div {
display:none;
}
p {
pointer-events: none;
}
a {
pointer-events: auto;
}
p:hover + div {
display: block;
}
<p>
This is an anchor. <br>
Lorem ipsum et cetera.
</p>
<div>
Cool picture:
<a>
<img src="http://lorempixel.com/50/50">
</a>
</div>
Related
HTML:
<p>I`m p</p>
<a>I`m a</a>
<h2>I`m h2</h2>
CSS:
:not(p){
color:red;}
:not() pseudo class should select all the elements inside the HTML document, that aren`t "p", and give them red color, but when i run the code "p" is red too, just like all other elements.
here you need to specify color for all html elements. as there is no color set to elements, the color from your selector is getting set to all elements available.
Here is what you need to add in your style:
*{
color: black;/* the color you will want for all or p elements. */
}
Notorious Zet you can fix this error by giving the p element a class and then using the not pseudo selector
The HTML
<p class = "notRed"> This is a p element </p>
<h1>This is a h1 element</h1>
The CSS
p:not(notRed){
color: red /*This will apply to all p elements with the class of notRed*/
}
Need to specify the color of <p> tag first. See the example from w3schools.
p {
color: black;
}
:not(p) {
color: red;
}
<p> I am p </p>
I am a
<h1> I am h1 </h1>
I'm using a hack from this answer to make an image to resize on click (the checkbox method). It works fine. However, when I try to also apply a css style on a text on image click, it doesn't work:
<html>
<body>
<input type="checkbox" id="img-box"/>
<label for = "img-box">
<img src="http://www.al-van.org/AV/Manners_files/greeneyedcat.jpg"/>
</label>
<p id="some-text">
some text
</p>
</body>
</html>
#img-box:checked + label > img {
width: 100px;
}
#img-box:checked + p {
background-color: red;
}
What is my mistake here and how should I fix it?
The jsfiddle: https://jsfiddle.net/eus18r3h/
The input element with the id "img-box" is not a direct sibling to the p tag. #img-box:checked + p would only style a p tag which is directly next to the input, you have a label in between.
This would be the selector you are looking for '#img-box:checked + label + p'
You have used the adjacent sibling combinator (+) for your paragraph tag, but it only works if you have one element after another. So since you have the label tag in between, it doesn't work. If you just replace the + with the general sibling combinator ~ the code should work.
#img-box:checked ~ p{
background-color: red;
}
I'm trying to make a div with text within it that is going to change whenever the user hovers over the div area, and not only the p tag. I am however not able to make my solution work.
JSfiddle
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover + p{
color:#fff;
}
Take away the + symbol in your css:
JSFiddle
CSS:
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover p{
color:#fff;
}
If you were looking for the selector which means direct descendant of div, you wanted >.
eg:
div:hover > p{
/*styles*/
}
Which would have worked for:
<div>
<p>Stuff</p>
</div>
But not
<div>
<span>
<p>Incorrect HTML example</p>
</span>
</div>
With your current CSS, you're trying to select the sibling.
If your HTML was like this:
<div></div>
<p>Some piece of text that is gonna change color when hovering the div</p>
the colour of p would have changed.
Ultimately however, with this specific HTML, you don't even need to include the p in the css and can just do div:hover, but if you're going to have other elements in it, then you should keep the p.
Take out the + P
div:hover {
color: #fff;
}
In your css you have used like this.
div:hover + p{
color:#fff;
}
It means you are applying the hover style for the siblings element not child element. In your case you need to remove + and add just space.
SIBLINGS ELEMENT PROVED HERE
div:hover p{
color:#fff;
}
CHILD ELEMENT PROVED HERE
there is no need to mention the <p> at all you can simply state the colour of all child elements by setting the style on the parent:
JSFiddle
div:hover {
color:#fff;
}
However if you did just want to target the paragraph text only you would use a > (child combinator) to target the P ONLY.
You must read rule about descendant selectors here.
If you need more info about selectors in css
Solved:
div:hover p{
color: #fff;
}
Your Css:
div:hover + p{
color:#fff;
}
+ selector select all <p> elements that are placed immediately after <div> elements.
Demo Fiddle With "+" selector
You can see, In the above fiddle div:hover + p select the outer <p> element, which are placed immediately after <div> elements.
But in your Case you do not need to use + selector. Because you want to select the child element of hovered div.
So, you should try this:
div:hover p{
color:#fff;
}
Working Example
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.
This may seem foolish.. I want to give style to a p tag which is after a certain div(the div is not the parent of the p tag).For example
<div>Hai</div>
<p>Hello</p>
<p>How are you?</p>
Here I want to give style to the p tags. I cant put these p tag in another div.I want to give all the p tags followed by the div same style.And also I cant give the style to p tag universally as it will affect other pages. Can anyone help? Hope I am clear with my question...
You have to use the general sibling selector :
div ~ p {
color: red;
}
See this jsFiddle : http://jsfiddle.net/yvdN6/4/.
You can see the doc :
The elements don’t have to be adjacent siblings, but they have to have the same parent, and the div element has to occur before the p element in the document source.
To select only the immediate p sibling:
div + p {
color: peru;
}
http://jsfiddle.net/yvdN6/
Or to select all succeeding p siblings, use the general sibling combinator
div ~ p {
color: peru;
}
http://jsfiddle.net/yvdN6/7/
<style type="text/css">
div + p{
Styles here
}
</style>