I have some HTML as follows ( you can assume closing tags )
<ion-content>
<ion-tab>
The problem is, when the DOM is created, the HTML5 tag creates a div which I cannot edit using CSS
It becomes as so
<ion-content>
<div class="foo">
<ion-tab>
I need to edit the CSS of the div whose class is "foo", however, if i change the CSS of foo, i change the CSS of all the classes using "foo".
How do I specifically apply CSS to that specific div when I dont create it myself?
With the small amount off details you have given us, all I can do is refer to these CSS Selectors.
There are number off ways to style a specific element. All have been explained in detail in the link I have given you.
Edit: CSS Selectors explained in detail.
There are several ways to change the style of <div class="foo">.
You could give the div an (extra) #id or class. This makes it able to apply certain styles, just you would do normally, to this specify element.
Another option would be parent child {} where you could style all the children within parent. Note: you could add '>/+/~' to be more specific of the place of child within parent.
A third option would be to specify at what place the div is within its parent using :nth-child(n) or nth-of-type(n).
As I said before, there are many ways to style a specific element. Please take a look at the link I provided.
Related
I am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements.
Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that particular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div.
Is there any possibilities?
(I wonder if this is possible in this way ;)
<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css"> my ui elements here </div>
I know its not possible in this way )
NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.
No you can't add css file to one div, you can only add style to the all document.
The only way i see to use css file to only one part of your page is to put your grid in an iframe (which is not really good...)
You can't do <div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css">. If jqstyles.css is not a big file you can change the div{...} rules in it with div.jq {...} and add class jq to your divs that you want to use jq styles. If jqstyles.css is so big that you can't go through it all, give your divs, which you want to have your style, a class like 'myDivClass' and change your css to div.myDivClass {...}. You may need to mark your rules as !important or just reference jqstyles.css first and your css 2nd..
Use ids and classes properly to avoid all the division to get the same property..
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.
I want to get all style properties of a specific html part(div, form, table, ...) and its children. I know how to search for style of any page element, using any browser(chrome, firefox, etc..). Should I look one by one for its children to obtain all css? Is there a way to get all css at one time related with an element and its children ?
The easiest way to do this is to use the Computed Style tab in the Chrome or Firefox web inspectors as this will allow you to see not only the explicitly defined styles of the element(s) in question but will also show you inherited styles from the cascade.
Otherwise you basically just need to copy ALL relevant style definitions from the element(s) and all of their parent and ancestor elements.
I need to find out the id of an element on the page using CSS. I know about the # selector for styling things by their id, but I've got an element nested inside another element, and I need CSS to figure out what the id of the container element is. Then it uses the content attribute to do some other stuff related to the id. I hope that makes sense :)
EDIT: Sorry I didn't explain it well, I'll try better next time :)
What's happening is I've got a custom <window> tag that displays an on-screen window. Then I've got a <titlebar> tag that can drag the window around using a javascript function (onmouseout="dragwin(windowid)"). I want to make the <titlebar> tag automaticly have the onmouseout attribute and pass the windowid to javascript. I was trying to make this happen with the :before and :after pseudo classes and the content property (so basicly all CSS)
The question seems to be unclear but if you want to select child element of another element with known ID you should do this:
#someID <children tag>, for example: #myID div{ CSS styling goes here }
Not real clear, but I will take a shot:
Given this HTML:
<div class="class1">
<div id="element"></div>
</div>
CSS:
.class1 > #element
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 */
}