So, I thought I knew my basic CSS, but my brain is twisting right now. I want to implement the 960 grid system to my website, but before I do, I want to fully understand the principle of the code.
I've got two questions. Firstly, the css regulating the width of the columns. We have the parent class ".container" to the left, and two classes to the right, where the "column" class is a descendant selector of the "one" respectively "two" classes. Is this saying that the class "column" is 40px wide if it is contained within "one" AND "container"? Simply put: I don't really understand the relationship between these three elements.
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
Second question: When calling the classes in the HTML code, it seems that is done with the code
<div class=one column>Content</div>
right? But there is no class labeled "one column", only the descendant selector "column" to "one". What I am not getting here? Thanks a lot in advance.
In HTML, you can apply multiple classes to a single element. However the above syntax is incorrect; the value has to be encased in quotes:
<div class="one column">Content</div>
Without the quotes you end up with two attributes: class=one and column, which is different (and invalid HTML).
HTML doesn't have a notion of selectors, so the space between them is not a descendant selector, nor is the attribute value itself a selector. Instead, the space is merely a separator used to distinguish them as two separate classes.
Consequently, to answer both questions, the selector .one.column applies to an element that has both of these classes.
class attributes don't have any sort of CSS processing, like descendant selectors. The value of a class attribute is a space-delimited list of classes to apply to the element. So this div:
<div class="one column"></div>
has both the classes one and column.
Then, the CSS selector .one.column applies to elements who have both the classes one and column.
Related
html....
<div class="one two">test</div>
<div class="two one">test</div>
css....
.one.two{
color: red;
}
.two.one{
color: blue;
}
I was supposing to have the first div color to be red and second div color to be blue, but it's taking lastly specified style rules for the both of the div that is color blue.
So, I wonder why the ordering of the classes are not maintained?
If this was what I was expecting, would it be an advantage or a disadvantage?
Think about it semantically: A class is just that - some encompassing category to which an element belongs.
If we take the example of a table, some plausible classes might be: "rounded-border" and/or "fixed-width" and/or "blue-background". Suppose a particular table has all of these three classes. If ordering were important, you would require six CSS selectors to target all tables that have these classes instead of just the one.
If the ordering of classes is important in distinguishing between two elements, then create two different classes for them. E.g. one-two and two-one.
Both selectors, .one.two and .two.one, match both div elements here, and the selectors have the same specificity. Thus, by the CSS cascade rules, the latter declaration wins.
The mutual order of the class selectors is irrelevant by definition: the meaning of a class selectors is defined so that the order does not matter.
Moreover, even if it mattered, the HTML attributes class="one two" and class="two one" would still be equivalent, due to the way the the class attribute has been defined in HTML specifications.
What you should do depends on what you wish to accomplish. The question does not specify that. If you need to make the styling of elements depend on the order in which their classes are written in a selector, there is a flaw in the design of markup and styling.
I was reading above discussion and I agree with what BoltClock♦ says and others as well.
but I was refering this Does the order of classes listed on an item affect the CSS?, the use of attribute selectors in CSS where ScottS answered with some
demo 1 demo 2 demo 3
and now I am muddled with whole thing! BoltClock♦ can you please put some more light on the same?
Okay, so I understand how to use both, but really what is the point other than semantics? I mean, what negative effect would it have if I created a class for a single, unique, element and only used it on that element?
Also, I know you can assign only certain elements to be effected by a class, for instance:
p.class{blazziblazzi}
Now, only the element 'p' will be effect by that class, if that element is assigned to that class. So why would anybody ever assign that class to an element if they didn't want that element to take on the attributes of that class?
I just don't get why they even made ID and Class separate, it seems pointless to me.
Any pointers would help, thanks!
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
http://css-tricks.com/the-difference-between-id-and-class/
Classes should not use it to rewrite code, I mean you must avoid writing the same, then for that you use a class, instead of assigning each id the same attributes.
For example:
If you have two elements:
<div id="div1" class="divYellow">
</div>
<div id="div2" class="divYellow">
</div>
if you want yellow background color, you could do so:
# div1
{
background-color: yellow;
}
\# div2
{
background-color: yellow;
}
but it would be best that you did so:
. divYellow
{
background-color: yellow;
}
This way when you want to make a change, you just do it in class, and not in two places
Specificity is one of the reasons. You can follow the link in the comments for info on that. Additionally, when you need to add anchor links, you have to use id's, classes will not work. Also, id's are particularly useful for specifying items while using javascript and other languages. In CSS, there is no harm in specifying a class for a single item, but it is a better practice to use id's for unique elements and classes for elements that may mimic the styles of other elements.
if using an ID will stop at the first occurrence.
If it is a class, it will scan the entirety of the document to make sure there aren't other occurrences.
Even if there is 1 occurance of a class, it still needs to scan the entire document to make sure there are none. It leads to issues with selection and runtime of fetching data, given various selectors.
U could for example shorten your CSS. By using a classname multiple times you could save some lines inside your CSS. I would only recommend this if you want to use a large part of your CSS for multiple div's. The small changes could be made within the different ID's if the classnames remain the same.
Basically I have a dynamically created page like below:
<div id="content>
DYNAMIC HERE
</div>
I have no control of what is in the div, but I know there will be a lot of tables that may be contained within other divs.
For example
<div id="content">
<div >
<div >
TABLE HTML HERE
</div>
</div>
</div>
But I will never know how far down a table could be.
So I would ideally want to do something like:
#content table {
style here
}
But this applies to all tables within that div even if they're nested many elements down.
How would I say for this div and everything within it style the tables?
Yes, the space syntax indicates that you want to select any descendants of the parent, so #content table is fine:
http://jsfiddle.net/XnnLG/
Your current syntax is for a Descendant Selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child. Child Selectors use
#content > table
so, the syntax you have is correct for applying a style to a nested table.
An exception to this (as stated here) is if you have a more specific selector.
Using #content table should target all the tables within #content.
However, if there is a table, for example #test which is styled from another stylesheet, the #test is more specific than #content table, so the other style will overrule yours.
You can overrule that style using !important in your stylesheet, you should use that on every line, so it's not the cleanest solution.
For example:
#content table {
color: green !important;
background: red !important;
}
Can you please explain me this kind of css declaration:
.menu_blueSkin_Middle.dir_left div.align_left {
float: left;
}
As far as i know if you have .someName{} it means that this is put in the html element class attribute. For example:
<div class='someName'></div>.
But the example that brings the question has two dots. One in the begining and one in the middle. Then there is space and another declaration div.align_left?
Please give me some explanation!
Two dots indicate two classes - those particular CSS rules will only take effect if an element has both those classes.
Both of these classes need to be present on your outer div:
.menu_blueSkin_Middle .dir_left
While your class on the inside div should contain a div with the class (it can have more than one, but atleast the following):
.align_left
Therefore it should look something like this:
<div class="menu_blueSkin_Middle dir_left"> <!-- Outer div class selectors -->
<div class="align_left"></div> <!-- Inner div class selector -->
</div>
.menu_blueSkin_Middle.dir_left div.align_left
There are three classes called here.
It's a bit complicated because whoever named these classes is an amateur. You should never name classes same as the css code.
To make it easier to understand, let's rename the three classes displayed:
menu_blueSkin_Middle we will rename to .firstclass
dir_left we will rename to .secondclass
.align_left we will rename to .thirdclass
ok, now with the three renamed classes, lets show you the code:
.firstclass.secondclass div.thirdclass {
float: left;
}
Ok so the following applies:
.thirdclass is the only one being affected [with the float:left;
code].
Only .thirdclass classes within a div will be affected. (due to the div being located before it)
Only .thirdclass div located within a class with double declaration of both .secondclass and .firstclass will be affected.
Example code:
<div class="firstclass secondclass">
<p class="thirdclass">
</p>
<!-- NOTE: THIS IS JUST A NOTE SO YOU KNOW WHICH IS AFFECTED.
The DIV below is the **only one affected**. The P above is NOT affected. Because it is not a DIV.
The DIV at the bottom is NOT affected. Because it is not nested inside the firstclass secondclass
-->
<div class="thirdclass">
</div>
</div>
<div class="thirdclass">
</div>
It means the element must have both classes to match the rule.
<div class="menu_blueSkin_Middle dir_left">
<div class="align_left"></div>
</div>
The div.align_left is a descendant selector. It means only apply (select) DOM elements of div.align_left that are nested in menu_blueskin_Middle.dor_left elements.
You can have more than one class name in the class attribute of an element, and a selector with two class names put together means that the element needs to have both class names to match the selector.
The selector would for example match the inner div in this code:
<div class="menu_blueSkin_Middle dir_left">
<div class="align_left"></div>
</div>
It applies the contained rule to elements which have both classes assigned.
Here's a sample
<html>
<style>
.one { color: green; }
.two { color:red; }
.one.two { color:blue; }
</style>
<div class="one">I'll be Green</div>
<div class="two">I'll be Red</div>
<div class="one two">I'll be Blue</div>
</html>
.menu_blueSkin_Middle.dir_left div.align_left
means
any element with the class menu_blueSkin_Middle AND class dir_left, that has a child element that is a div tag that has the class align_left
This is called double class selectors. It will be applied to an element having both classes, like one below
<div class="menu_blueSkin_Middle dir_left">...</div>
You can join any number of ID and class selectors like .class1#identifier.class2.class3 and so on.
Lots of answers on what, but why?
.menu_blueSkin_Middle.dir_left div.align_left {
float: left;
}
Sometimes you want to have more specificity (read that as a higher priority and adding two classes does that (no space between classes) - here you really have multiple which increases the likelihoods that this CSS will be applied. SO that element that has those multiple classes gains specificity.
Try a search google/bing on "css selectors multiple classes"
This question already has answers here:
Complex CSS selector for parent of active child [duplicate]
(10 answers)
Closed 9 years ago.
I'm trying to give a style to all <div> with children and not to those with no children.
Or, give style to all, and give a different style to those with no children.
The structure is similar to this
<div>
<div>
<div>
<div>Don't style me</div>
<div>Don't style me</div>
</div>
<div>Don't style me</div>
<div>Don't style me</div>
<div>
<div>
<div>Don't style me</div>
</div>
</div>
</div>
</div>
CSS level 4 is being worked on, and will include selectors that can do what you're asking.
When it does become available, the syntax will look like this:
.myclass! div { ... }
This will select the .myclass element that has a div element as a child. It's basically a normal CSS selector, but with the exclamation mark to tell it which element to select. (although note that the preferred syntax has changed a couple of times during the drafting process, and they've not finalised it yet!)
If you're interested in following up about this, you can read the full spec in its current form here: http://dev.w3.org/csswg/selectors4/
However that's in the future. For current browsers, what you want to achieve isn't really possible with pure CSS.
So what options do you have?
The most obvious work-around is to use javascript to achieve the effect you want. jQuery is perfectly capable of selecting elements in the way you've described, like so:
$('.myclass:has(div)');
Also obvious would be adding a class to the elements you want to style, and just using that. This could be done in Javascript or in your server-side code. Probably the most obvious answer, really, in the absence of an actual CSS selector you can use.
Depending on what you're trying to do, you could try re-arranging you HTML structure; in some cases, a bit of lateral thinking can help you achieve results that appear to do this, even with the CSS selectors available today. In particular, hover effects can often be worked around this way.
Again, depending on what your code looks like and what you're trying to do with it, you could try making use of some of the more esoteric CSS selectors. For example, div:empty will select divs that have no content. This won't work for the examples you've given (as you have text in the 'empty' divs), but would work in other cases where they really are empty.
It can be done in 2 ways :-
1) Giving a specific class to the parent div and the child div will inherit the style.
2) Giving class to divs individually.
The better option would be implementing via the 1st option.
Use the ">" operator.
Some documentation
Like div > div {}
http://jsfiddle.net/9tLXP/
div {
padding: 10px;
background: red;
}
div > div {
padding: 10px;
background: blue;
}
div > div > div {
padding: 10px;
background: orange;
}
div > div > div > div {
padding: 10px;
background: green;
}
Edit: Obviously I went ahead and styled each one with a different background color to demonstrate the point. In your case you would delete some of the extra styling I provided.
If you are truly looking to use the structure you posted, one where no classes or id's are assigned to any elements, then you can not accurately detect the bottom element in a group with n amount of children.
Operators such as > can give you a direct descendant but they can not tell you if it has any further children without further loops as Michael has shown. The issue therefore with Michaels method is you could not detect a div at level 3, and a div at level 4 and style them the same, as all div's at level 3 now inherit this style.
Long and the short - without adding in a class or 2 you can't accurately detect the bottom most child of a nested structure without effecting it's siblings.