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;
}
Related
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.
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.
i'm using wordpress and i have an element i want to style... it's called...
<h2 class="widgettitle">
now, i know i can do,
h2.wigettitle {
whatever:css;
}
however, the problem i have is that i have multiple widgets with the same title and it effects all of them.
but, this h2.widget title is within another div called "headerarea".
so, in my file it's like...
<div id=headerarea">
<h2 class="widgettitle">
whatever title
</h2>
</div>
so is it possible to make this specific element do something like, #headerarea.h2.widgettitle or something in my element?
i tried styling the outer div independently, but the inner div is still grabbing styling from somewhere else, so i need to override all of them.
hope this makes sense... thanks for any help guys.
Use #headerarea h2.widgettitle. Including a space means to look in the children. If you include a > this means only look in direct children. Note that if your overrides do not work, add !important at the end to ensure they will override any other styles applied.
You can use the child or descendant selectors to accomplish this. Child selector > #headerarea > h2.widgettitle select h2 elements with class widgettitle that is a child of element with id headerarea. Descendant selector a space #headerarea h2.widgettitle select h2 elements with class widgettitle that is a descendant of element with id headerarea.
Also see http://www.w3.org/TR/css3-selectors/#selectors
#headerarea .widgettitle {
/* Put your styles here */
}
I came across these on the new job I just started. I don't have web experience so my knowledge is pretty basic. I'm not sure what the below do. I've never come across or used syntax like this before. I was able to find that the #TAFeedback will apply to any element with that id, but that's all I could dig up.
.howmanyinstate .ctrlHolder ol
{
width:90%;
float:right;
}
#TAFeedBack div.ctrlHolder table
{
background:none !important;
}
.howmanyinstate .ctrlHolder ol
applies the style to all ordered lists ol in an element that has a class ctrlHolder and that element is a child of an element with class howmanyinstate
For example:
<div class="howmanyinstate">
<div class="ctrlHolder">
<ol>
...
</ol>
</div>
</div>
A CSS rule identifies the element to which it applies by using a selector.
Here is a writeup on CSS Selectors
The following is a descendant selector: #TAFeedBack div.ctrlHolder table indicates that it applies to a table that is contained in a div that has the attribute class="ctrlHolder" which is contained inside an element that has id="TAFeedBack".
.howmanyinstate .ctrlHolder ol
applies to any ol element within any element with a class of ctrlHolder which is in itself inside any element with a class of howmanyinstate
I'm not sure if you already know this, but this is known as a "css selector". Perhaps something you might want to read up on.