I'm trying to expand the width of my h1 tag when you hover over the img, however I cannot seem to get it to work.
http://jsfiddle.net/xJ4dc/
Thanks.
Try this:
img:hover + h1 {
width:100%;
}
jsFiddle example.
This rule says that whenever you hover over an image, change the width of all adjacent sibling <h1> elements to 100%.
The Selector has to select the element for it to apply the rule.
In your fiddle img:hover has no desendant h1 therefore nothing happens.
In this case, since h1 is the next sibling of img:hover you can use the + selector
img:hover + h1
fiddle
you need to understand what img:hover h1 says:
upon all tags named img on :hover all child elements tags named h1
you would need to use the plus sign img:hover + h1 to work.
But I would suggest do is http://jsfiddle.net/xJ4dc/5/
<ul>
<li>
<img src="http://www.real-whitby.co.uk/wp-content/uploads/donkey.jpg" />
<h1>This is a heading</h1>
</li>
</ul>
and then:
li img {
width: 100px;
}
li h1 {
display: none;
}
li img:hover + h1 {
display: block;
}
Note that I would use display:none; and then display:block to hide and show the heading.
The selector img:hover h1 means "any h1 element that is a descendant of an img being hovered over". The problem is your h1 element isn't a descendant of your img tag, it's a sibling. You can change to using the adjacent sibling selector to get the desired effect:
img:hover + h1 {
width:300px;
}
Related
I am doing some custom CSS & I am trying to create sub-categories to show when mouse hovers on the Icon & the Heading.
I was able to achieve the hover effect when you mouse over the icon but have spent two days but no luck with the heading.
Please see this screenshot for easy understanding.
Here's the code
/*this doesnt work*/
.cnt-box-side-icon > .caption h2:hover + .caption p {
display: block;
}
/*this works*/
.cnt-box-side-icon i:hover + .caption p {
display: block;
font-size: 14px;
}
.caption p
{
display:none;
animation: fadein 1s;
}
Thanks in Advance!
Ashish
From your screenshot, I can see in the inspector that the h2 and p elements are siblings. Your selector should be:
.cnt-box-side-icon > .caption h2:hover + p
Browsers read selectors from right to left. This selector reads as:
a p elementthat is an adjacent sibling of an h2 element with a hover pseudo-classthat is a descendent of a caption classthat is a direct child of a cnt-box-side-icon class
Read more: CSS selectors (MDN)
<p><a href...><img... /></a></p>
The links have a border and raquo after them in the css, like so:
p a:after, .content li a:after {content: "\00a0 \00bb";}
How can I target just images within a link inside a paragraph to remove this styling?
Using this later in the css isn't working:
a img, #logo a, p a img {border:none;text-decoration:none;}
a:after img {content:"";}
UPDATE:
Did a search and replace to add a class:
<p><a ([^<]*)><img
<p><a class="imagelink" $1><img
then used this css:
a.imagelink {border:none;} a.imagelink:after {content:"";}
Unfortunately, this is simply not possible. There is no "parent selector" in CSS, so you cannot select an element based on an element that it may contain.
There are many alternatives, but all of them will require updating the anchor tag itself in some way such as adding a class.
p a.img-container:after { content: "" }
In order to "target images within a link inside a paragraph", you will need to use this CSS selector:
p a img{Your code}
You can create style attributes in a new CSS class to reverse what you specified in
p a:after, .content li a:after {content: "\00a0 \00bb";}
Sample CSS
.clearStyle{ /*attributes*/ }
I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.
I have a structure:
<div id="div">
<ul class="ul">
<li class="li_one">
</li>
<li class="li_two">
</li>
</ul>
</div>
I want to set background:red to the second li element (class "li_two") using pseudo-selectors and want to begin from the most outer div. I'm trying to this way:
#div > ul:nth-child(1) { background:red; } // works but wrong, sets background to ul
#div ul:last-child { background:red; } // doesn't set to any element
#div ul:first-child { background:red; } // again sets to ul but not to li
#div [class=li_two] { background:red; } // only this one works fine
Is it possible to set style to li_two from #div using :nth-child or :last-child or :first-child selectors? How to do it?
#div li:last-child
Your 2nd option was almost right :) I think you misunderstood what last-child does. xx:last-child It doesn't select the last child element of element xx; it selects every xx element that is the last child of it's parent.
Some reading.
I've created a JSFiddle for you to test it
:nth-child() and the other pseudo-classes should be applied to the child elements, not the parent. Apply those pseudo-classes to the lis:
#div ul li:last-child {
background: red;
}
the first child should dsiplay the image icon home and the last child should not display the background image:
heres the fiddle: http://jsfiddle.net/gUqC2/
but no image is displayed in the first child and the image is not removed on the last child
You seem to be confused about classes and pseudo-selectors, the pseudo-selector :first-child is not equivalent to .first (a class-name). Similarly, :last-child is not equivalent to .last (again, a class-name).
Use:
.bodyheader ul li:first-child a:hover { background-position: 0 -16px; }
.bodyheader ul li:last-child { background: none; margin-right: 0; padding-right: 0; }
Updated JS Fiddle
References:
Pseudo-classes at the W3.org's CSS Selectors page.
use :first-child and :last-child instead of .first and .last
.whatever refers to element with class="whatever", while :first-child and :last-child are pseudo selectors, as you have used :hover with links