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
Related
I'm adding a gallery feature to my blog and the gallery looks like this.
<ul id="pikeme" class="pika-thumbs">
<li>image</li>
<li>image</li>
</ul>
The gallery plugin gets is styling from .pika-thumbs li - however there is also the default blog styling .text ul li that is also applying its effects on the gallery - which I don't want. Is there a way to exclude .text ul li styling from the gallery?
Thanks!
You could use :not, e.g:
Change
.text ul li
To
.text ul:not(#pikeme) li
Or
.text ul:not(.pika-thumbs) li
More on :not from MDN
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector, or any pseudo-elements.
Demo
use the ID selector #pikeme li to override the .text ul li
As ID selector has greater priority than class selector.
css
#pikeme li { /* instead of .pika-thumbs li */
color: red;
}
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 the following:
<a class="folder"><span>Background</span></a>
and the following CSS:
ul.arbo li > a:hover span,
ul.arbo li > a.current span {
background: #999999;
}
How can I modify the CSS so it does NOT apply if the link has a class of folder. In other words so it will not apply for the above HTML
You can do in css with negation pseudo-class selector :not , as follows:
:not(.folder) {
}
See working demo (provided by insertusernamehere).
CSS3 has the :not() selector, which you can add to your CSS (or you could do this with jQuery, either way). Mind you, this will only work in newer browsers.
http://www.w3schools.com/cssref/sel_not.asp
:not(.folder)
In your instance:
ul.arbo li > a:not(.folder):hover span,
ul.arbo li > a:not(.folder).current span { }
You don't need JavaScript or jQuery for this, and you can do it without CSS3 too (which may be relevant depending on what browsers you plan on supporting).
Just add another rule to prevent the background from changing on certain elements, like this:
ul.arbo li > a.folder:hover span
{
background: inherit;
}
Working example.
:not(.folder) {
}
Is a good solutions.Don't forget to check what browser do you want too work!
:not selector is a CSS3 selector and not all the browser support it...for example IE8 and earlier do not support the :not 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;
}
I am not sure why my child selector isn't working properly. In my example, only the direct <li> tag should have the red color. But instead, all <li> tags are colored red.
This is the jQuery fiddle of my problem:
http://jsfiddle.net/5Jf4Y/2/
The nested children are inheriting the color from their parents, so the selector wasn't actually matching them. Giving the lis a default text color fixes the problem (notice the order of the CSS rule blocks, as it makes a difference).
Demo: http://jsfiddle.net/5Jf4Y/6/
My guess is that both your selectors have the same specificity + the color property is inherited.
The color property is inherited.
Set first the default color for <li> elements and apply a different color for the direct children .courses > ul > li:
.courses ul li {
color: Black;
margin-left: 40px;
}
.courses > ul > li {
color: #9E002E;
font-size: 20px;
}
DEMO