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"
Related
I have written a CSS file to style a div with ID, inside another div with Classes. It looks like this
div.class1.class2 > div#ID1{
Styling Rules
}
But nothing is happening to DIV with ID1. Would appreciate any help and I can't change the structure of HTML or apply other IDs or classes to the elements.
<div class="class1 class 2">
<div id="ID1"></div>
</div>
IDs should only be used once, so if you followed that convention then you would simply target the ID in your selector and not concern yourself with the parent container it's in...
#id1 {
// code
}
But because of what you're asking implies that you have an ID being used more than once, I would suggest changing this to a class before moving forward; however, if you still wanted to keep your HTML the way it is, then you need to do this...
.class1 #id1 {
// code
}
I am having two dhx_scroll_cont div class, when i write css code as bellow it working for two classes. Now i want to write a css code that apply for first div call
.dhx_scroll_cont:before{
//some code here
}
Demo Fiddle
Simply use:
.dhx_scroll_cont:first-of-type:before{
//some code here
}
more on first-of-type
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
Update
According to the screenshot the OP posted the below should work:
.dhx_view_day_events .dhx_scroll_cont:first-of-type:before{
//some code here
}
Depending on the structure of your HTML the solution you require will change.
Would you be able to provide the HTML structure for us to work from?
Otherwise, you could:
Add another class to the div you want to change
By having <div class="dhx_scroll_cont"> you are only giving one targetable class. One way around this is having 2 classes separated by a space, such as:
<div class="dhx_scroll_cont OTHER_CLASS">
This will allow you to target the class OTHER_CLASS with the certain CSS values that you want effecting the first div.
Using :first-child or :first
:first-child and :first allow you to target the div that is the first child element of it's parent. For example:
<div class="surround">
<div class="dhx_scroll_cont">
</div>
<div class="dhx_scroll_cont">
</div>
</div>
dhx_scroll_cont:first-child {
CSS HERE
}
This will effect the first dhx_scroll_cont div.
As I said previously, if you can give some more information on the structure of your HTMl it would help us with your solution.
EDIT
Thanks for showing the HTML structure.
With that structure out of the methods that I have shown, adding another class to the first of the dhx_scroll_cont will allow you to specifically target that div, and not the other one.
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;
}
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.
I was at w3schools.com learning html and their code examples included the word "class" such as <div class="page"> . They didn't explain it so i needed you guys to. So please define what class in <div class="page"> means.
A class is a non-unique identifier for HTML elements. It can be used in a variety of ways:
1. For styling of those elements with CSS.
To apply a group of CSS properties as a pack to all elements of the class.
.page
{
border: solid 1px #009900;
padding: 5px;
color: #000077;
}
You can apply it like this:
<div class="page">
<ul class="page">
Ans so on.
You can also restrict it to only be valid for a specific element type, for example, only for divs:
div.page
{
/* ... */
}
2. For accessing these elements with JavaScript.
To perform some manipulations with all elements of the class. Like this:
$('.advancedOption').attr("disabled", true);
3. For some internal operations in browser. Beyond the scope of this question.
A class is best thought of as a 'category' or 'type'. This is best demonstrated with an example.
Let's say you have an HTML page that will have a table of products. In that table, you will have the products name, description, etc. Now, suppose you wanted ALL the products name to be styled a specific way.
<p class='product-standard'>This is a product name</p>
Then with your CSS you can do something like this:
p.product-standard { color:gray; }
So now, all tags with the class 'product-standard' will be gray.
Now, if you want certain sale items to be red, you can do this:
<p class='product-sale'>Sale item</p>
and
p.product-sale {color:red}
Classes allow you have consistent styling across many html tags.
The attribute class refers to a CSS class.
For example, in HTML:
<div class="page">
will refer to the CSS code:
div.page {
some css properties
}
MSDN is the best place to look for -
CLASS Attribute - Basically its a string or attribute that specifies or receives the class or css style rule.
It's just a space-separated list of words you associate with the element that can be used to select it for styling or with a script. A class by itself doesn't do anything — it's like a tag on a blog post.
If you're familiar with the idea of a class in programming, it has nothing to do with that.
A class in html is an attribute you can add to any html element (like paragraphs, links). You can make up the name yourself (has to start with a letter though), and then stylesheets or javascript can do something with that specific element.
For instance:
<p>This is a paragraph with no class</p>
<p class="foo">This paragraph has a class named "foo"</p>
<span class="foo">This span has a class as well
Now if you apply CSS to style your html, you can use:
p { color: blue }
p.foo { color: red }
span.foo { color: green }
.foo { font-size: big }
This way all paragraphs have blue text, except the paragraph with the class 'foo'. The rule p.foo effects only paragraphs with the class foo. The rule span.foo applies only to span elements with the class foo, so that part will have green text. Then finally, the .foo rule applies to all elements with the 'foo' class, so the last two elements will have big-sized text.
You can also have multiple classes. <div class="foo bar"> has the classes foo and bar. You can access those separately in the CSS by using .foo or .bar
i know it is a very old question but i hope my answer helps any newbie who comes here searching for a simplified answer.
in brief,
you may consider the class as a set of names for the element.
those names you may use any of them to call the element anytime on the same page.
it can be used to select the element to style it, change it, add some behavior for it, and/or remove it.
example:
<div class="sara"></div>
this sara element can be selected in css like the following ex:
<style>
.sara{color:red}
</style>
or in javascript like the following ex:
<script>
document.querySelector('.sara').remove()
</script>
I hope this simplified answer helps