Can we set parent element style from child style? - css

<div id="main">
<div id="sub">
</div>
</div>
Can I set main's style from sub's style?

Cascading Stylesheets only go (cascade) down, so they're not designed to do this at all...even in those rare cases it would be very handy if they did.
You need either JavaScript, in-line style or a different layout to get the stying you're after...but pure CSS affecting the parent isn't an option here unfortunately.

This would be possible with Javascript, but not with pure CSS.

Using CSS4 selectors, the original question could be solved with this:
li! > a.active { /* styles to apply to the li tag */ }

Related

CSS selectors apply style to all images except the first one

I thought I could do this with advanced CSS selectors, but struggling.
I have a JS Fiddle here with the below example
Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.
So something like .entry-content img:first-child (although I know that wouldn't work)
<div class='entry-content'>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
</div>
If you want to select all img tags except first one use :not subclass:
.entry-content div:not(:first-child) img
Working example:
http://jsfiddle.net/GrAaA/
Browser support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child
You'll need to exclude the image in the first div child, rather than just the first img child, as every img is the first and only child of its div while the div elements themselves are siblings.
To do that, you can use this selector:
.entry-content div + div img
This selects the image in every div that comes directly after another div, so your first one won't be matched.
If you have siblings other than div within .entry-content you may need to use the general sibling selector instead:
.entry-content div ~ div img
apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.
This should help
.entry-content div:first-child img {
border: none;
}​

Why is html>body used?

I came across html>body in one of the stylesheets and wanted to know as to why it is used.
html>body {
font-size: 16px;
font-size: 78.75%;
}
It's called a Child Selector.
The reason it's being used is likely because it's a hack to exclude IE6 and below. Those browsers don't understand the > selector.
More Information
the '>' means that it is referencing on child elements of the parent (in this case 'html')
so for example I could have an arrangement of divs that look like so
<div id="outermost">
<div class="inner">
<div class="inner">
</div>
</div>
</div>
and i wrote some css like so
#outermost>.inner { background-color: #CCC; }
it would only apply the rules to the first level '#inner'
Obviously there is only one body tag however it used to be a hack to exclude ie6 and below to write different rules for ie7+ ;)
Child selector, more info here: http://www.w3.org/TR/CSS2/selector.html#child-selectors
So in your code it would be any body child of html
'> symbol indicates child of
Above code means
The style applies to all the tag body which is a child of html
#sample>div
above applies to all divs which are children of the element with id sample

change CSS of sibling when our element have <a> Tag

I purchased a DotNetNuke log in module and Want to change appearance of this module.
When a user login in my site an html like this will be generated:
<div id="Login">
<div id="HelloLogin">Hello</div>
mosijava
</div>
But when (s)he log out, the html goes like bellow and <a> tag will not generate:
<div id="Login">
<div id="HelloLogin">Hello</div>
guest
</div>
I want to assign a css to div with ID="HelloLogin", ONLY when a user login. it means when I have <a> tag in my html.
is there any pure css way to do it?
I tried this selector but it didn't work
#login a:before{
color:red;
}
There's no previous sibling selector in CSS, so you won't be able to write something similar to what you've tried. The :before pseudo-element works differently than you'd expect.
In this special case, though, you can use CSS3's :not() and :only-child pseudo-classes with the IDs, so it'll match only when #HelloLogin is not the only child element in #Login (inline text, like the word "guest" in your example, doesn't count as children/siblings in CSS):
#Login #HelloLogin:not(:only-child) {
color: red;
}
The problem is that IE < 9 doesn't support :not() or :only-child, but there's no other way to do it in pure CSS.

jqueryUI Css widget, how to prevent descendant

i'd like to prevent CSS from my styles do descendants of descendants without giving them classes or ids? my jQueryUI widget are affected by my ascendant CSS.
i've tried
For instance:
.myClass > ul {...} instead of .myClass ul {...}
but it doesn't work (checked with Firebug 1.5/FF 3.6)
.myClass MUST BE a class, not an id (#). It seems to work with id, but that's not what i want..
In fact, i'd like something to 'contain' CSS jQueryUI Widget.
Thanks from your help.
Sebastien
Usually jQueryUI Widgets are wrapped inside a DIV that has a class such as .ui-widget, however those are usually at level of a first child of the body, meaning if you have your layout in something like a #wrapper div, the widgets styles won't be affected be descendant selectors coming from that wrapper, to make things clear:
<body>
<div id="wrapper"><h1>an h1 inside the wrapper</h1></div>
<div class="ui-widget"><h1>h1 inside the jquery ui widget</h1></div>
</body>
So if you do put #wrapper in front of all your styles jQueryUI won't pick them up.

CSS link styling troubles

I've been making websites for years and theres on thing that really bugs me and confuses me.
I set a link style in the css file for a content div in my website and this successfully styles the links.
However if i create a span or div inside this div with a new link style i end up having to add in !important to various attributes which i can only tell by trial and error.
Is there any way around this or am I doing something wrong?
Thanks
My intuition is that you're having problems with your selector specificity.
Ensure that your new link selectors have a higher specificity than the ones in the enclosing element. Normally this would mean using a selector like div.outerdiv div.innerdiv a.class rather than just a.class etc.
For example:
<div class="outer">
<a class="outerlink" href="#">Outer Link</a>
<div class="inner">
<a class="innerlink" href="#">Inner Link</a>
</div>
</div>
If you use these selectors you may have trouble (depending on css ordering etc.):
a.outerlink { **css here** }
a.innerlink { **css here** }
Even if you use these selectors, it's not guaranteed to work how you want:
.outer a.outerlink {}
.inner a.innerlink {}
However, these selectors should work best, ensuring your innerlinks override attributes:
.outer a.outerlink {}
.outer .inner a.innerlink {}
Make sure you specify all the attributes you want to override in the .innerlink css.
Once you understand specificity, the power of the darkside will be yours.
I think I know what you are referring to, and I solve this problem by adding "a" after the inside span or div css rule.
Let's assume you have a general rule:
a
{
color:white;
}
If you want to override this rule in a div, you have to write
div a
{
color:yellow;
}
and not just
div
{
color:yellow;
}
This is because the link is inside the div, so the first rule is stronger than the third for links.

Resources