Hello is there a way with css to style the 2nd element on page with the same class slightly differently to the first.
For example I have two ul's on a page with a class of topbardropdownmenu. I want to give the 2nd ul a differen't background to the first. Is there a way to do this with out altering the html?
You can do it with the :nth-child() pseudo-selector. It is CSS3 though, and not supported in some browsers (e.g. <=IE8 & <=FF3.0 doesnt support it).
.topbardropdownmenu:nth-child(2) { background: #FF0000; }
You could do it with JavaScript in a cross-browser compatible way though, if that's an option for you.
What holds the <ul> elements? I'll assume a <div id = "lists">
/* First element */
div > ul.topbardropdownmenu:first-child{
}
/* Rest of the elements */
div > ul.topbardropdownmenu{
}
...alternatively
div > ul.topbardropdownmenu:not(:first-child)
It depends which browsers your users are using, you might be able to use the nth-of-type css pseudo-selector:
ul.topbardropdownmenu:nth-of-type(2) {
/* styles the second ul of class=topbardropdownmenu
}
If there's a particular pattern to the occurrence of these ul elements, you could use descendant and/or sibling selectors:
div > ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that are the immediate descendants of a div */
}
p + ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that immediately follow a p */
}
Look at the CSS3 nth-child() pseudo-class.
You can use :nth-child http://css-tricks.com/how-nth-child-works/ but IE may struggle with it. Consider this jQuery alternative:
$(".class").eq(1).css();
http://api.jquery.com/eq/
Related
I have several divs. One of them has class="active". I want all the divs to be hidden (display:none;) except the one with .active. What should the selector be?
Have you tried?
div { display: none; }
div.active { display: block; }
PS. I'll add explanation. When you specify a class in a selector it has higher priority in cascading logic (because of its higher specificity) than just a single div (because single div is more generic, wider). So there is no need to use !important or stuff like that.
div:not(.active){
display: none;
}
Try the :not pseudo-class.
For example:
div:not(.active) {display:none;}
As Paul commented below, this selector is not supported in IE8 and below. But considering you included the CSS3 tag and specifically asked for a selector, that might not be an issue. For a cross-browser solution, see #mkdotam answer.
use !important in with css, something like that:
.active {
display: block !important;
}
and example: http://jsfiddle.net/hNLen/
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'm trying to transition a child element when the parent element is focused.
I want to do something like:
parent:focus{
//do something to first-child
}
Is this possible, or does this require JS?
I'm not sure if this is what you mean, or not. If you do...
.parent:active .child {
/* Style */
}
The style will be applied to .child elements inside the focused .parent.
Here's a fiddle that shows how it works. You can click anywhere in the big div to change the smaller (child) divs.
You should use
parent:focus CHILD {
//do what you want on the child
}
Example:
ul li:focus a {
color:#000;
}
Even if I'm not sure it will work with :focus that is usually used on inputs. It would be better to use it with :hover (for example).
I want to override another style sheet and set the float for all elements to none. If I use 'div, span, a' as the selectors or even 'body div, body span, body a', it doesn't override the previous class selector. I could use !important but this isnt great for obvious reasons.
.class {
float: left;
}
/* my overide */
div, span, a {
float: none;
}
Note- in the code ive only shown the class of 'class', but actaully their are many classes and id's.
Is there a way to do this without using !important? The reason im doing this is im mobile optimizing my site with media queries. I need to remove absolute positioning, floats, etc for all elements, but then i will want to add some of these styles to specific elements.
Thanks
As I wrote in my comment above:
Using the * selector is generally ill-advised. Selectors focus on the
key selector first (the right most selector) and so using the *
selector means that the browser must find all elements on the page.
This is a huge performance issue.
You can read more in this answer: (why) is the CSS star selector considered harmful?
Rather than using the * selector as you have, I'd stick with targetting the elements you want to affect, specifically.
Chances are, there will only be a few types of elements in your page that are floating.
These are usually some divs, perhaps some images, a list or two?
div, img, ul, ol{
float:none;
}
If there's a few more you can include them also.
#jdin; for overide the .class float just write like this:
div.class, span.class, a.class {
float: none;
}
EDIT:
Define an ID in your body tag like this
HTML:
<body id="home">
<div>Tag</div>
<span class="class">Class</span>
<div id="id">ID</div>
</body>
CSS:
body#home *{background:pink;border:1px solid #000}
Check this example http://jsfiddle.net/sandeep/D7Sg6/2/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I know this is a shot in the dark, but is there a way, using css only, CSS2, no jquery, no javascript, to select and style an element's ancestor? I've gone through the selectors but am posting this in case I missed something or there is a clever workaround.
For example, say I have a table with classname "test" nested inside a div. Is there some sort of:
<div>
<table class="test">
</table>
</div>
div (with child) .test
{
/*styling, for div, not .test ...*/
}
There is no such thing as parent selector in CSS2 or CSS3. And there may never be, actually, because the whole "Cascading" part of CSS is not going to be pretty to deal with once you start doing parent selectors.
That's what jQuery is for :-)
You can use has():
div:has(> .test) {
/*styling, for div, not .test ...*/
}
In CSS there is an :empty selector that allows you to match empty elements, you can negate the effect with :not selector.
div:not(:empty) {
// your styles here
}
However I'm not sure if all browsers support this.
div:not(:empty) {
margin:0;
}
is NOT recognized by http://jigsaw.w3.org/css-validator/ as CSS2
it's the purpose of CSS to "cascade" down from the more containing to the more specific elements. I guess it's possible for you to "reverse your logic", like in
div.myclass { /* format parent */ }
div.myclass * { /* neutralize formats in descendants */}
div.myclass img { /* more specific formats for img children */ }
good luck
Mike
:empty pseudoclass supported by Firefox, but is not compatible with IE.
But a very simple jQuery workaround for IE is at http://www.webmasterworld.com/css/3944510.htm . Saved my bacon