I downloaded a framework and they are using this as a css selector:
#Footer .footerTop
Why not just use:
.footerTop
Are they the same, or selection is different?
#Footer .footerTop only applies to the .footerTop within #Footer
<div id="Footer">
<div class="footerTop">I qualify</div>
</div>
<div id="Copyright">
<div class="footerTop">I don't qualify</div>
</div>
Using just .footerTop would apply rules to both of the inner DIV elements, losing its specificity.
# is an id selector and . is a class selector.
So they are selecting an element with class footerTop inside an element with id Footer.
Related
I'm experimenting with Bootstrap.js panels that can collapse. I'd like to see if it's possible to change styling of a panel-heading element but only when it's adjacent to a panel-collapse element. The selector below will change all headings obviously.
.panel-heading:hover {}
Because I'm trying to look ahead to see if the target element is followed by a particular class I'm not sure I see if CSS can support this.
<!-- This should change style of panel-heading when hovering over the panel-heading element -->
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-collapse">
</div>
</div>
<!-- This should NOT change the style of the panel-heading when hovering over the panel-heading element -->
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
There is no way to currently do this in CSS3, however there is something being proposed in CSS Selectors Level 4. This feature has been widely requested.
Relational Pseudo-class: :has()
Such that you could do something like:
.panel:has(.panel-collapse) .panel-heading {
}
Meaning, apply styles to all .panel-heading classes that are a child of .panel classes containing .panel-collapse
This is a great article on upcoming CSS Selectors Level 4: https://www.sitepoint.com/future-generation-css-selectors-level-4/
In the meantime, you'll have to use something like jQuery. You could add a class like .panel-hoverable to all .panel elements that contain elements with the class .panel-collapse
I have this html code
<article>
<div class="a">
<div class="a_b"></div>
</div>
<div class="c"></div>
</article>
I need to do some changes to div .c on div .a_b hover
Can I do this using scss (or native css), without using any javascript code?
You can deploy the :hover pseudo-class (and other pseudo-classes like :focus, :checked, :target etc.) to modify the styles on:
the element itself
a descendant of that element
a subsequent sibling of the element.
In this setup:
<article>
<div class="a">
<div class="a_b"></div>
</div>
<div class="c"></div>
</article>
You can apply a pseudo-element to .a and it could modify the styles on .a (itself), .a_b (its child) or .c (its sibling).
But a pseudo-element on either .a_b or .c can't modify the styles on any element except the element itself - because neither element has any children or any subsequent siblings.
The solution:
In your structure, add .a_b as a subsequent sibling of .a:
<article>
<div class="a">
</div>
<div class="a_b"></div>
<div class="c"></div>
</article>
and then use CSS positioning to re-position .a_b so that visually, it appears to be inside .a (even though it is actually a sibling element of .a, rather than a child element of .a).
I have :
<div class="myclass">
<div >
<div>
<div>
</div>
</div>
</div>
</div>
Ok, I'm using .myclass div:first-child {} to give style to the first div but I discover how the style is applied by inheritance to the nested divs....????
Any idea what I'm doing bad ?
.myclass > div:first-child {} will only affect the direct child div.
More information on the various selectors available is here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
<div id="main-content">
<div>
<div>target me
<div>don't target me</div>
</div>
</div>
<div>
<div>target me too
<div>don't target me</div>
</div>
</div>
</div>
I've tried this:
#main-content div>div {
}
But this ALSO targets the divs saying "don't target me" I wish not to target those divs.
Of course we can use Id's or classes, but the point is to declare a general rule for all.
Please advice.
Just refine the selector a bit to enforce the hierarchy: #main-content > div > div
http://jsfiddle.net/zXaLU/
As a note, when using structural selectors it's nice to reference non-generic tags.
Example: #main-content > NAV > UL is more meaningful than #main-content > DIV > DIV
If you want styles only to apply to the outer of the two divs, you need to use two style definitions. The first sets the style for the div targeted and the second for the inner div not to be targeted:
#main-content div>div {
/* set some styles */
}
#main-content div>div>div {
/* reset the styles defined before */
}
In general the inner div (not targeted) inherits all the styles of its parent div, so in order to nullify that effect, you have to explicitly reset all those styles again.
EDIT
After all comments: If "targeting" does not include usual CSS inheritance, Tim Medora's answer is more suitable. My answer tried to account for inheritance as well.
How [dooes one] properly select [the specified] elements?
The "proper" way would be to give the items you want to select a class that is indicative of their status:
<div id="main-content">
<div>
<div class="someclass">target me
<div>don't target me</div>
</div>
</div>
<div>
<div class="someclass">target me too
<div>don't target me</div>
</div>
</div>
</div>
...and then you can simply use the class selector:
.someclass {
...styles...
}
But if you're unable to modify the markup, you can still use the child selector chain:
#main-content > div > div {
...styles...
}
I would like to change the style of all the entries following a certain div. See example. Is this possible with child selectors? Thanks!
<div class="wrapper">
<div class="entry">content</div>
<div class="entry">content</div>
<div class="CHANGE">content</div>
<div class="entry">content</div>
<div class="entry">content</div>
</div>
This selector :
div.CHANGE ~ div {your rules;}
For elements directly under div.wrapper.
div.wrapper > div {your rules;}