I have the following problem:
I get a generated HTML with dynamic content. The IDs and the html tag-hierarchy is always the same. I can set a stylesheet.
I tried to set the color of the text to red. If I set it on this position where it's done in the screenshot it does not work. If I set it inline in the table below (table cols=2 border=0...) it works.
Is there a depth limit for CSS ? How can I set the color for the whole text containing the div (id=15B_gr or id=oReportCell) ?
++UPDATE++
I tried to set a stylesheet, but it does not work:
You should be able to target all the children of a div by using an asterisk. In this case:
#15B_gr * {
color:red;
}
or you could set it on just the elements:
#15B_gr span {
color:red;
}
** Edit for further information **
As pointed out by #nico o, some complications can arise due to having a number as the first character in the ID. Previous versions of the HTML spec did not allow IDs to begin with a number.
http://w3c.github.io/html-reference/datatypes.html#common.data.id
Maybe you have a rule (in another stylesheet?) which has a selector which has the elements class that you want to style but additionally the class name of an element of a parent or grandparent element. In this case that specific style would outweight your style.
In this case you could add an "!important" to your rule (color: red !important; ) ...
or you could add the selectors of the other stylesheets style to yours too so that that style doesn't outweight your's anymore.
You should "inspect" the element! (Rightclick on it, "inspect element") to find the active and overwritten rules for that specific element! You find those info in the lower right corner of the "inspector"-Window wich then opens. Along with the currently active styles you there find the stylesheet in which the styles are defined.
Related
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.
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 have a .content CSS class which indents 55px. In some cases, I want to include a Link at the beginning of the paragraph, but this Link I do not want to indent.
Other than creating a new .content2 class which doesn't include the indent, is there anyway to negate the indent using classes applied directly to the link?
I've tried using a negative indent value applied to the link via classes which are called to format the link, but that only seems to alter the text in the link's own box, when in fact I want the link box to be not indented.
page in question: http://www.fccorp.us/development/index.jfx.php
Thanks much for the graphics snaplemouton!
This raises a new but related question: What is the cascading order for multiple classes that contradict? I'm testing in firefox (current version 19.0.2, non beta) and the links normally use two classes, but certain ones use a third.
--update--
My edit that removed a class (required nine extra lines in my css file though) from being needed worked. This however did not fix my margin issue:
The first class configures the appearance of the link's "box" (box model) including margins as well as configures the link text's appearance (link, visited, active). The (formerly third) now second class, which is used only when these links are placed within a paragraph, is used to negate values which no longer apply because the link is within the paragraph. I set top & bottom margins via the first class, which applies to (almost) every button. With the (now) second class, I tried to negate those margins for the few links which are placed within a paragraph. But for some reason, those values which are negated through the use of margin values of 0px (zero) via the second class, are not being altered. They are remaining their value assigned by the first class.
(As I typed this, I realized how to eliminated the key which adjusts the link/visited/active attributes, so that's being altered now. But I doubt that will change anything. If it does, I'll update this.) - As I said in the update, this change did not solve the issue of the margins not being eliminated.
However, rather than trying to cancel the existing margins, do I need to actually negate them by using a negative number? This should work, but I thought that the CSS cascade meant that certain styles would overwrite others if they contradicted. Or are they added together?
There is multiple way to do it. Either by overriding the marging or padding (see link on edit 3), setting the indent to 0 or, in the way I prefer to do it, by using a width 100% width div element for your content and floating it to the left.
<div style="float:left; width:100%;">
<a style="float:left">stuff</a>
</div>
Edit : It should also fix that text having one line next to your anchor. If you actually wish to have the text right of your banner, you can remove the div and simply float the anchor the the left.
I really prefer using Divs because it's very flexible and allow you to really set or remove empty blank spaces like you wish to do it.
Edit 2 : I even made a paint image to show you the difference. :)
Edit 3 : To answer your new question, here a link that explain pretty much everything about cascading order.
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
Basically the highest weight win. If both are of the same weight, the latter always win. (Whichever come last will take effect.)
In order : style added straight to the element > stylesheets > default
Inside stylesheets, #id > .class > element
If there is multiple of the same, the last one of them will win.
Edit 4 : Sorry I was wrong on my second sentence in my answer. I edited it.
You simply need to add this to your anchor
margin-left:0px;
margin-bottom: 0px;
margin-top: 0px;
to remove the margin.
CSS Cascade
The cascade is determined mostly by specificity. Below is a list of the priorities, from high to low.
1. !important modifier
2. Dynamically-applied styles using JavaScript
3. Inline styles specified using the style attribute
4. Specificity of the selector (higher specificity wins)
(a) #id (100 points each)
(b) .class, :pseudo-class, [attribute] ( 10 points each)
(c) element, ::pseudo-element ( 1 point each )
(d) * ( 0 points each)
5. Whichever one appears last
The style with the highest priority is applied last. In a tie, the one that appears later in the code wins.
This is a slight oversimplification, but it should convey the basic idea. In greater detail:
A class, pseudo-class, or attribute beats any number of elements or pseudo-elements.
An id beats any number of classes, pseudo-classes, or attributes.
An inline style set via static HTML or JavaScript beats any number of ids.
And most of all, a style with the !important modifier beats any style without it.
Specificity examples
formal informal
selector notation notation
--------- -------- --------
* {} 0,0,0,0 0000
div {} 0,0,0,1 0001
.a {} 0,0,1,0 0010
#a {} 0,1,0,0 0100
div#a.b.c {} 0,1,2,1 0121
Also, the specificity of an inline style is 1000 points (1,0,0,0).
text-indent: 0px;
CSS property.
Negaging that value and using it for the padding-left or margin-left of the link will give the result you want.
<p style="text-indent:40px;">
<a hre="#" style="margin-left:-40px;" onclick="this.style.display='none';">Un-indent</a> blah blah blah blah blah</p>
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
Given the following code:
<div id="bla">
<p class="blubber">Johnny Bananas</p>
</div>
and the style in head of that html doc:
<style>
div#bla{background:yellow}
p.blubber{background:purple}
</style>
Why is it that the child will be coloured purple and overlay its parent?
The background property is not inherited by children by default. Therefore, the background style of div#bla does not apply to p.blubber, and p.blubber can specify its own background color independently of its parent and regardless of specificity.
And since background isn't being inherited, no overriding actually takes place.
When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.
check out the section on cascading order - http://htmlhelp.com/reference/css/structure.html
Because the specificity is the same, so the rule will apply to the p element. If you remove the p and just have .blubber, it wouldn't work.
Also, children can't override parents, so if there were more content, you'd see yellow around the p (add padding to the div).
Background color is not and inherited attribute in CSS.