How do I access the last div (div.access-example) in this line of code?
<div id="footer-example" class="full-example">
<div id="footer-example2" class="fixed-example">
<div class="almost-there">
<div class="access-example">
I tried it like this:
div#footer-example div#footer-example2 div.almost-there div.access-example
{ code goes here; }
When that didn't work, I added { code goes here !important;} in case something was overriding it. I also tried with children (>).
Note: I can't use div.access-example and add my code because the same div is being used elsewhere, and I need to change it only in that particular place; and because it's a Wordpress site and I don't have access to the Ftp, I need to access nested divs.
This works..
#footer-example #footer-example2 .almost-there .access-example {
color:red;
}
This also works
#footer-example .fixed-example .almost-there .access-example {
color:red;
}
Make sure this (your) CSS declaration is not being overridden using Chrome Dev Tools or something similar.
div div div .access-example
{
background-color:yellow;
}
or
#footer-example #footer-example2 .almost-there .access-example
{
background-color:yellow;
}
You can vary by removing one of the class or id in the 2nd.
If you just need to call the .access-example class, you can do this:
.access-example{}
If you need to have the hierarchy, this works too:
.full-example > .fixed-example > .almost-there > .access-example{}
Related
I have two classes, one is used specifically fro certain tags, the other can be used on any tag:
a.action_link_2 {
display:inline-block;
}
.display_none {
display:none;
}
In some circumstances I want to apply both these styles and have tried this:
<a class="action_link display_none">content</a>
However, when rendered in the browser, the 'action_link' class take precedence. I understand that this might be to do with CSS class priority, i.e. tag-specific classes taking precedence. My question is how do I make this tag hidden using these classes and still allow the 'display_none' class to be used on any element to hide it?
you could just remove the a from before the class, and also add body before the display none class to give it a higher priority.
.action_link_2 {
display:inline-block;
}
body .display_none {
display:none;
}
You are right, it because specificity read this
To overcome the problem, you need to increase the specificity for
.display_none class when it is present on action_link_2 .
Just add one more rule, just below all of it
a.display_none {
display:none;
}
This will work , but there will be a problem when you try to add class
.display_none to an anchor, but there is no .action_link_2 class
present.
So the final and best solution would be to use:
.action_link_2.display_none {
display:none;
}
You could try this:
.display_none { display:none !important; }
In Chrome and Firefox, the following doesn't have the desired effect:
<style>
#hoverOnMe { background-color:orange; }
.open:hover { background-color:lightblue; }
</style>
<div id='hoverOnMe' class='open'>HELLO</div>
The :hover doesn't work. The background remains orange on hovering.
However, each of the other three possible combinations (listing by id twice, listing by class twice, and listing by class followed by id) works.
Of course my actual project is a little more complicated than this example; I'd like to add an "open" class to every hoverable element.
What's going on here? What's the simplest workaround?
I'd like to add an "open" class to every hoverable element.
Well if this is the case and you expect the same behaviour for all elements,
then you could just use !important:
.open:hover {
background-color:lightblue!important;
}
In the HTML code there is a div like:
<div id="xxx.yyy">...</div>
I want to specify the style in a css file. How can I get a reference to this div? The following does not seem to work:
#xxx.yyy {
}
Thanks
#xxx\.yyy {
}
Should do the trick. No harm done in using dots in CSS id names
You could also do something like this...
div[id="xxx.yyy"] {
/* your styles here */
}
The spec says it all: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
jsFiddle: http://jsfiddle.net/UnsungHero97/mjGzQ/
I'm working on some CSS from a tutorial, a div has this class:
<div class="related products">
How can I reference it in the stylesheet?
The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:
.related { color:#ff0000 }
.products { font-size:12px }
If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:
.related.products { font-weight:bold }
And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.
div.related.products is the general method
You reference it by div.related.products which literaly translates to "a div with class of related and class of products".
Or, you could reference it by using either class names, since it will catch both.
jsFiddle Example.
In the css, just put the name class of the div by doing this:
.related products {
/*styling to go here*/
}
Now any styling within the related products class will be applied to that div.
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".