Develop Reference

How to constrain the scope of inline CSS?

I'm rendering dynamic CSS for each item in a list. Each item will have potentially unique CSS rules for its elements, i.e.
<div id="thing1" class="vegas">
<style>
p {
font-size: 14pt; // this stuff is generated dynamically and i have no control over it
color: green;
}
</style>
<p>
I'm thing 1!
</p>
</div>
<div id="thing2" class="vegas" >
<style>
p {
font-size: 9pt; // so is this stuff
color: red;
}
</style>
<p>
I'm thing 2!
</p>
</div>
Is there a way to wrap each item in a general CSS rule that would limit the scope of each item's associated CSS to the item itself? Like
.vegas > * {
whatever-happens-in-here: stays in here;
}
Or any other way to handle scoping who-knows-what kinds of dynamically particular CSS?

The cascading style sheets are able to handle styling children of particular elements, so:
div#thing1 p {
rule: value; // Only applies to p in div with id="thing1"
}
div#thing2 p {
rule: value; // Only applies to p in div with id="thing2"
}

You need to know about the global styles that browsers have. For eg., find the below list:
font-family
line-height
text-align
The above have their default value as inherit, which means they get the property values from their parent, no matter what. So if you change the parent's property, your child also gets changed.
And you have other properties like:
margin
padding
border
width
height
These do not change, or inherit from the parent. So, if you wanna do something like what you wanted, you need to give your descendants, or immediate children, not to inherit or reset the styles for the children.

Why don't you use inline style attribute?
<p style="color:red;align:center"> Hello </p>
The above CSS style will only be applied to that particular paragraph tag.
You could use inline style statement for other tags and HTML elements too.
Or you could include an external common stylesheet and use the inline statements where you need a variation.CSS applies the latest style description it comes across.So the inline statements would over-ride the common css stylesheet effects.

How to apply css to div which has no class?

I am creating some design part in HTML. I have two div. Both div element are generating through java script. First div has a class and second div has no any class or id. I want to apply style to second div.
<div class="class_name"></div>
<div style="display:block;"></div>
After applying style the second div style will be style="display:none;"
Please suggest.

You can have CSS only solution for this, there is no need to have a javscript for this you can try adjacent siblings selectors of CSS:
To target very next div you need this:
.FirstClassName + div{
/*your style goes here */
}
To target all divs in a parent after a given class name:
.FirstClassName ~ div{
/*your style goes here */
}
Demo

You can use :not selector for the second div:
div:not([class="classname_of_the_first_div_here"]){}
or even simpler :
div:not(.classname_of_the_first_div_here)

Assuming that there were no other div before the two div elements were created:
document.getElementsByTagName("div")[1].style.color = "blue";

use style attribute in the second div
<div id="div1" style="display:block;"></div>

if it has only two div's then use the last-child property.
yourparent div:last-child
{
your style
}

You basically have three options (maybe more, but then we need some code).
First one, use the element selector. but that means you're styling all elements of the same type on the page
div { background: red; }
Second option, style all divs that have no class attribute:
div:not([class]) { background: green; }
and last but not least, style a div that is a child of another element. If your document structure is build up properly this is most probably the way to go.
div.parent > div { background: blue; }
Checkout the Fiddle here

Selector for all elements that appear after an element

I am aware of the + selector that allows us to manipulate an adjacent element, but I'm looking to manipulate all of the elements rather than just one.
<article class="non-selected"></article>
<nav id="nav-below"></nav>
<article class="select-me"></article>
<article class="select-me"></article>
<article class="select-me"></article>
<footer class="dont-select-me"></footer>
In the example above I'm trying to select each of the article's with the select-me class. (I can't use a normal class selector).
Is this possible for jQuery?

Use the general sibling combinator:
.non-selected ~ .select-me {
color: red;
}
Example: http://jsfiddle.net/XFGfd/5/

You have to use ~ instead of +, all following elements will be matched
For exemple,
article.non-selected ~ article.select-me{} /* will select all articles having .select-me class that are siblings but after a article having the .non-selected element class */
Using jQuery
$('article.non-selected ~ article.select-me')....

jQuery: LIVE DEMO
$('#nav-below').nextUntil('.dont-select-me') // do something
http://api.jquery.com/nextUntil/
Or using CSS General sibling combinator (~): LIVE DEMO
#nav-below ~ article{
background:red;
}

Hide static (or hardcoded) text in HTML page

I have a HTML page containing some hardcoded/static text.
The text string does not have any class/id/name. It's just there.
How to hide it on page load?
P.S: I really hope this is not a repeat question. I have done my 'homework'.

You can hide an element that doesn't have any direct identifiers by using a CSS selector which examines structure. You didn't post your markup, so it's impossible to give an exact solution.
Example 1
HTML
<body>
<section>
<div>Div I want to hide</div>
</section>
</body>
CSS
SECTION > DIV { display: none; }
There are many permutations of this pattern and many selectors available.
See: CSS2 Selectors (very wide support) and CSS3 Selectors (supported in most newer browsers).
Example 2
Here's a more complex example:
HTML
<div id="foo">
<ul>
<li>Hide this item</li>
<li>Don't hide this</li>
<li>Don't hide this</li>
</ul>
</div>
CSS
/* hide the first child of any UL which is a direct descendant of #foo */
#foo > UL > LI:first-child { display: none; }

In CSS, display: none? That'd be the easiest way. Or you could go with javascript once the page has loaded.

If you're talking about doing it with javascript, you would have to do a window.onload and set the style.display = "none"; but that would require an id/class/some way to reference it (there are ways to reference it without them but it's a lot better style to just give it an id/class. The function would look something like this.
window.onload = function() {
document.getElementById("text").style.display = none;
};
where your string has an id of "text"
Although if you are determined to have the text just appear as none on startup, why not just set the style/css to originally to have a display of none?

conflict between the same class or id of multiple css files

Is there any way to stop the conflict between same class or id of multiple css files. As I am explaining below for better understanding:
There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files. Let's suppose if any class of master page has the same name to reloaded elements' class while properties are different. Then how should I handle this to stop the conflict.
master.html
<html>
<head> //attached master.css file here </head>
<body>
<div class="myClass"> </div>
<div class="dynamic"> /* often reload elements by ajax */ </div>
</body>
</html>
master.css
.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }
now i am showing the reloaded html elements & css files into dynamic div of master page
reloaded tag line by ajax : <div class"myClass"> </div>
reload.css
.myClass{height: 30px; width: 25px; background: yellow; }
Now as you can see there are two classes with same name but different properties. Then how should I stop the confliction?
#Edit Thanks everyone for your support & time but my problem is different here.
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server.
so whatever the contents loads in dynamic div, it's coming from client side (e.g. tag lines & css, js). in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn().

You could apply the cascading rules of the CSS:
In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.
you adjust the reload.css rules to
.dynamic .myClass{height: 30px; width: 25px; background: yellow; }
The cascading rules which are applied when determine which rules should apply to html div could be referenced here
Updated 11.23
As the OP only have control over master.css, the above solution won't work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:
body > .myClass {...}
This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.

Option 1: A more specific selector
.dynamic .myClass { }
This selector selects the .myClass element that is a descendent of .dynamic.
.dynamic > .myClass { }
This selector selects the .myClass element that is a direct child of .dynamic.
Option 2: Inline CSS
<div class="dynamic">
<div class="myClass" style="background-color: yellow;"></div>
</div>
Option 3: Use a different class.
UPDATE
If you want to avoid the previous defined property to be overwritten by a later defined value, you can use the !important syntax.
.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */
If I understand your question correctly, this should sort it.
So you should add !important to the properties that seem to be overwritten.

div.myclass { ble ble }
div.main div.myclass { ble ble }
<body>
<div class="myclass"></div>
<div class="main><div class="myclass"></div></div>
</body>

Whichever css class of the same name is loaded last will overwrite anything set by the earlier class. However, if you use an inline style attribute this will always take precedence over anything set by the css file (so using an inline style is one option).
You could also use different style names or clarify your style with tag names div.myClass or id's #myDiv.myClass.