basically just want to know if the attached image shows a valid CSS usage? I'm using a lot of nested divs lately and this is how I'm targeting them in my CSS. It works really well but I'm just curious if it's a good way of doing it? Or is there an easier / more efficient way?
Thanks!
link to the image
First of all: yor way is totally ok and the efficiency depends on the whole page. Maybe it can get more efficient with those ideas:
If your div-classes or ids are unique
You can also write just the class - you dont have to write the whole path then. Instead of
#content > .inner > .content > div { }
it is possible to write for example
.content > div { }
Helpful when you are using nested divs
When using nested divs you very often have to type a lot of code multiple times:
#content > .inner > .content { }
#content > .inner > .content > div {}
#content > .inner > .footer {}
#content > .inner > .footer > div {}
There are very helpful scripts called LESS and SASS (both of them work pretty much the same). They allow you to write everything just one time like
#content {
.inner {
.content {
// some stuff
div {
// some stuff
}
}
.footer {
//some stuff
div {
// some stuff
}
}
}
}
The direct child selector (ie. > ) is fine, but personally I don't like it because it makes it difficult to move and re-use styles. For example if I want to use .content somewhere other than #container I'm going to have to change a whole heap of CSS. Ideally you should be able to re-use blocks of markup without having to change CSS.
The direct child selector is best used to limit the depth to which a style is applied. For example it would be appropriate to use .content > p if you want the style to apply only to direct children so you can have another style for deeper children. If that's not the case then you might as well just use well named class and ID selectors.
Related
By “wheel” I mean the nested selector path.
I’ve converted a somewhat large CSS file to LESS for the most part, nesting rules in DOM order. However, some of my styles are being overridden. Basically, all of the “plain” styles have been nested making their output CSS rules extremely specific (which I want). What’s not so specific are the rules where the parent elements have classes attached. Example:
Regular nested rules:
.grandparent {
some: style;
.parent {
other: style;
.child {
you: get;
.grandchild {
the: picture;
}
}
}
}
So, the issue I’m having is adding styles to the grandchild if the grandparent has a specific class attached. Something like:
.grandparent.visiting .grandchild {
visibility: hidden;
}
Is there a way to neatly add .visiting to the big hierarchy I’ve already built? Or do I have to redo the entire nesting order for all the child element selectors affected by .grandparent.visiting?
Not sure if this a noob thing. I just started with LESS a couple weekends ago. But I can’t seem to find any solutions using :not and the & selector (as superb as it is) doesn’t seem to help here either.
You can reference the current selector using the & symbol, then write selectors after it as it was in one line.
.grandparent {
some: style;
&.visiting {
.grandchild{
visibility: hidden;
}
}
}
Let's suppose we have code snippet like that:
<div class="wrapper">
<nav></nav>
<header></header>
</div>
I think in HTML 5 era it's important to stylize code correctly. For instance - could you tell me which solution is better and why? And how can I learn that "semantic" of SASS?
First (div's layout is sustained):
.wrapper {
nav { ... }
header { ... }
}
The Second (all of elements are separate):
.wrapper {}
nav {}
header {}
*Of course - we're talking about situation when it isn't necessary to mark parent-children connections (all of these occur only once at site).
I don't think we're talking about SASS semantics here but the answer is that you probably want to let the nesting of your styles reflect the nesting of your markup.
So if your markup is nested as you say, then the nested styles are the correct way to do it. Additionally you may want to cautiously add more global styles in each scope but it's best to keep these to a minimum (as always with global information in software development).
Example:
body {
.some-global-body-style;
.nav {
.some-global-nav-style;
.subnav {}
}
.content {}
}
I have example (js-fiddle)
I want hide all tbody elements, that doesn't contains elements tr elements without class "day_label" and "hide"
In this exmaple i have stats for day, and i need to hide all day if there is no any record for day.
What you want is basically a CSS parent selector (tr.hide < tbody { display: none; }), this doesn't exist yet. (soon!) However, this can be done quite easily with a library like jQuery:
$("tbody").each(function() {
if ($(this).children("tr:not(.hide):not(.day_label)").length) { //Not 0
$(this).addClass("show");
}
});
CSS:
tbody { display: none; }
tbody.show { display: block; }
Demo: http://jsfiddle.net/SO_AMK/RqBCY/
To effectively select a parent based on it's children - what you are asking - is not possible with CSS (at this particular frozen moment in time).
You have two three ;) options:
When generating your HTML (either with a server side language or in JS) generate your parents with classes that describe the state of the children. This way you can target the parent directly.
Use JavaScript to target your parent and then calculate whether or not it has the right kind of children. If it does, then apply a className that adds the styles you require.
For other situations you can also do as Abe Petrillo states - which is to inverse your logic and only enable when a particular selector is found. However I believe this wont work for what you are trying to do as it involves more complcated 'conditional logic' than can be implemented.
Not sure what you mean, but you could hide all rows, and then show the rows that are relevant:
tbody tr { display:none; }
tbody tr.day_label { display: block; }
I need a css3 selector to target an element when the :target equals the id of the element (easy) or when the :target is empty (impossible?). It’s hard to explain, so let me give you a simple example.
div {
background: blue;
}
div:target, div:no-target {
background: red;
}
But of course the :no-target pseudo class doesn’t exist ;). Is there a way around this without using Javascript? Thanks in advance!
Sigh. I feel like I'm resurrecting a dead topic, but it needs a real answer.
It's possible to do this with CSS alone, just by using :last-child and a general sibling combinator, in the form of :target ~ :last-child:
.pages > .page:target ~ .page:last-child,
.pages > .page {
display: none;
}
/* :last-child works, but .page:last-child will not */
.pages > :last-child,
.pages > .page:target {
display: block;
}
The rules applies in the following steps:
hide all pages
show both targeted page and the last page
if a page is targeted, hide the last page (.page:target ~ .page:last-child)
(live example)
Edit: Apparently this is very similar to the accepted answer in an older, previously mentioned, related post.
There is a great answer for this over at default-target-with-css
It revolves around this trick that seems to have problems in iOS. It's been fixed in Safari, so maybe it'll be in iOS 5?
All I can think of is that you have some javascript that checks to see if the hash is empty. If so, it adds a class to the body tag called "noHash". Then, you can use the fact that there is the noHash class available in your CSS rules.
if (window.location.hash.length <= 1) {
document.body.className += " noHash";
}
Then, your CSS could be like this:
div {
background: blue;
}
div:target, body.noHash div {
background: red;
}
If there's any circumstance where a user might add a hash value after the fact, then you may have to watch for that to make sure the noHash class gets removed appropriately.
Note: you don't have to add the class name to the body tag. You can add it to any parent object that covers all the objects you wish to affect.
Why don't you use div:not(:target) or div:target:empty?
I have li already styled in a stylesheet. I need it to stay a specific style. It is styled without using a class, so for example
.selectors{width:50px;}
li{
padding:10px;
}
Now i have run into a problem. I am trying to style the li again, without any classes like what i have in the example code. For example
.options {width:30px;}
li{
padding:50px;
}
What i was wondering is, is there any way to attach certain elemnts to another element. I'm not sure if this is making any sense, but I am trying to have one LI only be applied to a certain part of the page, and the second be applied to another part of the page. Is this possible without using classes? I can't modify the code or add classes otherwise the script doesn't work. Can someone help if I am making any sense at all.
A very common way to do this is
#content li { ... }
#sidebar li { ... }
so the li will behave differently inside two different elements with different IDs. Say, if content is a div, and sidebar is a div, then the li will behave differently inside these two divs.
It is also possible to be "within a class":
.items-to-watch-out-for li { ... }
This is a good way to avoid "too many classes", which is called "classitis", like in this article:
http://www.ehow.com/how_2284990_classitis-html-css-descendant-selectors.html
It's never going to be the nicest way if you can't add classes.
Potentially if the uls are in the same container you could try:
ul:first-child li {}
This will allow you to style the first ul however you want then the generic:
ul li {}
Will take care of the second.
This method should work in all browsers apart from IE6.
http://www.quirksmode.org/css/contents.html#t17
動靜能量 solution is the ideal way.