I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.
Related
I need your help to understand a selector of css that I wuold like to use to hide an element.
At this url you can see the page http://www.bachecahotel.com/annunci/all_ads.html
Well I wuold like to hide "Tutte le offerte" the second one in orange.
DOing some test I succeded in that using this css:
.juloawrapper.adsmanager-list.adsmanager-list-table div > h3:first-child
{
display:none;
}
But I dont understand why it doesn't effect other h3 also if they are child of divs
Thanks
Frank
I am having trouble finding out what the i means in the css below. Can someone please explain to me it's purpose and why use it? Thanks.
.social li a:hover i {
}
There exists an i tag in html
According to http://www.htmlquick.com/reference/tags/i.html
The HTML i element makes its content rendered in italic font style. The presentational nature of this element makes it a good candidate for deprecation in future versions of HTML, so the general recomendation is to stop using it.
It is actually just the tag to make things italic. like this
This piece of css affects all italic text in the link where you hover over.
Consider :
<ul class="social">
<li>
This is a <i>sample</i>
</li>
</ul>
This : .social li a:hover i { } will focus on sample in the above eg.
DEMO : http://jsbin.com/UcotesUj/1/ Hint : Try hovering your mouse over the text sample and see the magic..:)
Explanation:
The above selector means
Select any element having class of .social and than further select nested li element and than further select the a tag which is nested inside li and then on hover apply the properties to i tag which is nested inside that a element.
So the selector targets the i element which is used for making the text italic in your HTML
<i>Hey, this is italic</i>
In CSS, any token that begins with a letter means that tag. So i matches the <i> tag, which is used for italic elements.
Is it possible to define css class behaves dependent to an other css class?
For example; when
a:hover
Then I want to set
p {background:#fff;}
Is this possible with pure css?
Edit: Assume that no nested relation exist.
If you mean you want all p to have that style when a:hover regardless of where they are in the DOM, then no, you can't do that. You'll need to use a script to apply the style (or some class containing that style) to the p elements when a receives a hover.
if you have a structure like this:
<a><p>...</p></a>
then this:
a:hover p {background: #fff;}
will work. However, block elements should not be placed inside inline elements (in this case, no <p> inside <a>
if your markup is valid, and looks like this:
<p><a>...</a></p>
then you could have
p:hover {background: #fff;}
but a descendant can't affect the parent css (unless you use javascript) while the opposite is true (parent css affects descendants)
I do not see why you would be limited to these restrictions with a littl creativity. if you use fixed positioning the descendant can overlap its parent. and still respond like a descendant.
If the <p> tag immediately follows the <a> tag then you could use the adjacent sibling selector e.g.
a:hover+p{
background:#fff;
}
This is supported in IE8+
There are already many questions related to this. But I'm still not clear. Also not sure if the title of the question is correct. Here's my problem:
What the below CSS code means?
#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a { /*some cssC*/ }
#nav li a:hover { /*some cssD*/ }
#nav li ul a span { /*some cssE*/ }
As per my understanding, please correct me if I am wrong:
Line 1: every li element within any element with id="nav" will have styling cssA
Line 2: When I put my cursor over every li element within any element with id="nav" will have styling cssB
Line 3: every a element within every li element within any element with id="nav" will have styling cssC
Line 4: When I hover every a element within every li element within any element with id="nav" will have styling cssD
Line 5: Every span element within every a element within every ul element within every li element within any element with id="nav" will have styling cssE. Also anyother ul or a element will not have this style untill unless the parent element has id="nav"
You are correct on all except .over, The "." represents a class. and "#" represents ID. But yeah, you've got the concept down.
Also, if you want to "Override" as the title says, you'll add
!important
to the end of any rules you want to take precedence over the others.
you can override the css by giving !important or you can give inline style.
priority of inline css is high then external css
All of the existing answers are correct, but there is a bit more to it than has been given already.
As has already been said, "li.over" is a combined selector - it will selector li elements that also have a class of "over". If you wanted to use different CSS properties or property values whilst the mouse is over (hovering over) the element then you use the pseudo class selector "li:hover". These are called pseudo class as you aren't selecting something that is part of the document, but based on the state of an element. There are also pseudo elements which again aren't in the document directly, but logical extensions of the document structure - for example first-child, first-of-type, fifth-of-type, odd items etc.
"#nav li ul a span" is a descendant selector, as you say it will select elements that are children (at any level) of each parent, so "#nav li" selects "li" elements contained within an item with ID "nav" - even several levels down.
If you want to select items that are direct children of the parent then you can use the ">" symbol. I.e. "#nav > li" will select li elements that are directly below any item with an ID of "nav", but not any li elements that are children of that element, or indeed elements below that.
Incidentally "#nav" is exactly equivalent to "*#nav" as it selects any element with the ID, you could also write "ul#nav" if you only wanted to select ul elements with the ID. This could in turn be combined with a class "ul#nav.bar" or even multiple classes "ul#nav.bar.touch".
Removing the space between the selectors like this combines them, so in the last case instead of looking for an item with class "touch" inside an item with class "bar" inside an item with ID "nav" inside a "ul" element, you are selecting a "ul" element with an ID of "nav" and both the classes "bar" and touch". An element like this-
<ul class="bar touch" id="nav">...</ul>
It is also possible to use attribute selectors, so if you wanted to select links which will open in a new window you could use "a[target=_blank]" - which selects based both on the presence of the attribute and the value - or if you wanted to select links with any href value you could use "a[href]". This simply selects all elements with this attribute.
On top of that you can even select items which are adjacent (next to) another element, if you wanted to select all paragraphs directly following an image then you would use "img + p" in your selector, or "p + img" if you wanted to select images directly following a paragraph. As always the last item in the selector is the one the styles are applied to.
It is generally considered good practice not to be overly specific with CSS selectors, as it makes your code much less re-usable. Unless you need to write "div.widget" just write ".widget" as the otherwise you'd not be able to create a "widget" using other elements, and it makes it much harder to override these properties later on in those cases you might need to.
To wrap up selectors, there's a good introduction to CSS selectors on MDN and Code School (paid course provider) also have a excellent online foundation course on CSS available for a very reasonable price which will go through selectors in some detail.
With regard to overriding classes, there are two further concepts you should understand - cascade order and specificity.
Given a HTML snippet of-
<div class="widget">
<p>
Some text you want to style
</p>
</div>
And the following CSS-
#widget p { color: yellow; }
p { color: blue; }
The color of the text would be yellow and not blue because the specificity of the first selector is greater (more specific) than the second. To understand this I suggest you have a play with a Specificity calculator and have a read of the Smashing Magazine tutorial on the subject.
In short though, inline styles trump all, and the more specific a selector the more likely it is to be applied in place of other selectors that would otherwise apply different property values. The value in the selector with the highest specificity score "wins", but other property values from selectors with lower specificity that do not clash will also still be applied to the element.
For example, altering our earlier CSS-
#widget p { color: yellow; }
p {
color: blue;
font-weight: bold;
}
The text will still be yellow, but will also be bold as there is no font-weight property given in the selector with higher specificity.
The last concept you should understand is what happens when two or more rules have identical specificity.
#widget p { color: yellow; }
#widget p {
color: blue;
font-weight: bold;
}
In this case our text is now blue as the second rule appears later in the stylesheet and thus overrides the first. If you have multiple stylesheets then the rules from the last stylesheet to appear in the document head will override rules with identical specificity.
In almost all cases you should use a more specific or the order of the selectors within the stylesheet in order to apply the right styles to the right element, and absolutely should not be routinely using the !important flag to achieve this unless absolutely necessary. See http://james.padolsey.com/usability/dont-use-important/ for a fuller explanation than I give here, but it rapidly becomes unmaintainable (what do you do when everything is "important") and it is also not accessible for users who may wish to override your styles in their user agent stylesheet (local to their browser) in order to help them read or use the page (increasing font size, contrast with background colour etc.)
I'm woking on a project that heavily relies on the :target psuedo-class.
If the <a> tag has a name and that name is the text after the # and there is no other element with an id equal to the text after the #, then the a receives the :target.
That was confusing, so here's an example:
<style>
* {
color: black;
}
:target {
color: red;
}
</style>
<div id="wrapper">
<ul>
<li>one_link</li>
<li>two_link</li>
<li>three_link</li>
</ul>
<div id="one">div_one</div>
<div id="two_div">div_two</div>
<div id="three_div">div_three</div>
</div>
If you were to click on the "one_link," then "div_one" would turn red. However, if you were to click on "two_link" or "three_link," then they themselves would turn red (because there isn't a div with the id of the # string, but they have the name of the # string)
What I want is for the :target class to work on both the anchor and the div, or at least a way to select the anchor only when the div is targeted. This can probably be done with Javascript, but I'm trying to use pure css.
Not in pure css. There's no way to "program" css to dynamically change a selector to add some extra text based on something that's been clicked. That's waaaay outside the scope of CSS. That's why there's Javascript.
You can exclude the anchor selection by using div:target
* {
color: black;
}
div:target{
color: red;
}
http://jsfiddle.net/
With the same technique you can try with a:target to get only the current targeted anchor
That's not really possible.
You can't use anything like :target ~ div, because of your HTML structure: there is no way to select a parent element. Even if that wasn't a problem, there's no automatic way to map "nth" a to "nth" div.
With license to change the HTML, I came up with this: http://jsfiddle.net/pA84B/ - it's nasty.
Just use JavaScript.
See Google: HTML, CSS, and Javascript from the Ground Up.
JavaScript is built for behavior and interaction. The Google guys explain it well (I think), plus Google is a bit more authoritative than me. You should use JavaScript for this.