In a project, I use a complex css file in which css elements are described in such a manner :
.content > .pages .page-content .widgets > h2{
some attributes...
}
.content > .pages .page-content .widgets > h2 > p{
some other attributes...
}
The DOM structure is as follows :
<div class = "page-content">
<div class = "widgets">
etc...
Many elements are described this way which are nested one in another.
Today, I need to rearrange this CSS in order to add a new div element between page-content and widgets so the structure becomes :
<div class = "page-content">
<div class = "a new class or no class definition at all">
<div class = "widgets">
etc...
Is there a simple way of doing this without having to modify each CSS definition, because there are so many nested elements that finding them all would be hard and time consuming...
And again, thanks for your wise advice !
You shouldn't need to make a change.
You don't have a direct descendant defined between .page-content and .widgets.
Therefore it doesn't matter if you have 1 or 100 elements in between .page-content and .widgets. As long as .widgets is a child of .page-content at some stage, this selector will still apply.
as per my knowledge you need not to change in the css. coz still .widgets will be a child of .page-content so this selector will still work for you.
you could check out more information about this here
Refer for more details
Related
Two elements have the same class name, in my case, "img"
Is it possible to style the elements differently that are children of two different classes, even if they have the same class name?
I want the img elements under class "slide-type-final" to be styled different to the img elements under "question-2"
.slide-type-final>img {
max-height: 40em;
}
.question2>img {
max-height: 40em;
display: inline-table;
}
img isn't a class name in this case, is it? Apart from the solution you already have in your question (?), ...:
1.) You can apply a second class to the parent(s), like <div class="slide-type-final up"><img scr="...">, whose img child you would address as slide-type-final.up>img { ... }
2.) You can apply different classes to the img tags, like <div class="slide-type-final"><img class="up" scr="...">, which you would address as slide-type-final>img.up { ... }
it would be helpful if you can provide html structure. and yes, css styles can be override based on parent element/class.
if styles in your code are not overriding, that means hierarchy is not correct.
'>' symbol means img tag (note not class as to catch img class you should have .img) should be direct child of element with class slide-type-final or class question2. if weight of classes are same, then whatever style come last will apply
You can use pseudo-classes like nth-child(2n)/first-child/first-of-type/last-child
Or :not(:last-child) etc.
I have this html code here:
<div default_name="RandomName1">
<div name="RandomName1">RandomName1</div>
<div name="RandomName2">RandomName2</div>
<div name="RandomName3">RandomName3</div>
</div>
The property default_name on parent div changes from time to time. I would like to set the child div which has name matching default_name to background-color:red.
Like:
<style>
div > div[name=default_name_of_parent] { background-color: red }
</style>
I have no control over what the name values are, users set it. Is this possible via style sheet?
Thanks
This can be done, if you make a rule containing a selector for each possible “combination”, like so:
div[default_name=RandomName1] > div[name=RandomName1],
div[default_name=RandomName2] > div[name=RandomName2],
div[default_name=RandomName3] > div[name=RandomName3]
{ background-color: red }
http://jsfiddle.net/wc5whfwa/
But j08691 is totally right with their comment – this should be avoided at all cost if possible, data- attributes would be the way to go.
My question is different than this one, but it's regarding the same principle, so this quote is relevant here too:
from https://github.com/stubbornella/oocss/wiki
Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific h2 with .myObject h2 {...}, create and apply a class that describes the h2 in question, like h2 class="category".
But what if the design dictates that an object's style changes when it's inside certain containers? Here's a simplified example of my problem. Let's say there's an object called foo, and a container object called bar. foo and bar have their own location-independent styles:
.foo {
...
}
.bar {
...
}
But when foo is inside container bar like so, its color needs to change when the user hovers over bar:
<div class="bar">
...
<div class="foo">
...
</div>
...
</div>
It seems in this case, you can't avoid writing a location-dependent selector that looks like this:
.bar:hover .foo {
// color style
}
One solution I thought of is to introduce a class that's explicitly dependent on bar (named using BEM naming convention to be explicit about parent-child relationship), and add it to the foo object:
<div class="bar">
...
<div class="foo bar__foo">
...
</div>
...
</div>
.bar:hover .bar__foo {
// color style
}
I want to confirm, is this a good way to handle the issue? Are there other ways in OOCSS as well?
The big concern here isn't that your chaining classes together, it's that your classes are location independent. Nesting is going to happen. Approaches like OOCSS are great because they help to you know when things like nesting and class-naming is going awry.
Mark Otto released a Code Guide last week and here are some relevant points:
Keep selectors short and strive to limit the number of elements in each selector to three.
Scope classes to the closest parent only when necessary (e.g., when not using prefixed classes).
He also provides these examples:
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
In short: Aim to scope a class to it's parent. Don't go further than 3 selectors.
You're fine going with:
.bar:hover .foo { ... }
Further Reading
Stop The Cascade
Scope CSS Classes with Prefixes
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 need to select all span tag elements within a div with an id list_{[0-9]}+ having the following form:
<div id="list_1234" ...>
<!-- can be nested multiple levels deep -->
...
<span class="list_span">Hello</span>
</div>
How can I do that, e.g. without using jQuery? Is that possible?
If you're happy with css3 selectors you could do something like
div[id^="list_"]
But this will also target divs with ids like list_foo.
You can do this with pure CSS pretty easily, just give those divs a class like this:
<div id="list_1234" class="container" ...>
And CSS like this:
.container span { /* styles */ }
Why you do'nt use a common class ? You can add many class
class="list_1234 mydiv"
And your selector :
.mydiv span
The only thing you can do is:
list_1 span, list_2 span, list_3 span... { ... }
Is it possible to add a "class" attribute to these divs? That's the proper way to handle multiple elements with ids.