I need to select all span tag elements within a div with an id list_{[0-9]}+ having the following form:
<div id="list_1234" ...>
<!-- can be nested multiple levels deep -->
...
<span class="list_span">Hello</span>
</div>
How can I do that, e.g. without using jQuery? Is that possible?
If you're happy with css3 selectors you could do something like
div[id^="list_"]
But this will also target divs with ids like list_foo.
You can do this with pure CSS pretty easily, just give those divs a class like this:
<div id="list_1234" class="container" ...>
And CSS like this:
.container span { /* styles */ }
Why you do'nt use a common class ? You can add many class
class="list_1234 mydiv"
And your selector :
.mydiv span
The only thing you can do is:
list_1 span, list_2 span, list_3 span... { ... }
Is it possible to add a "class" attribute to these divs? That's the proper way to handle multiple elements with ids.
Related
In a project, I use a complex css file in which css elements are described in such a manner :
.content > .pages .page-content .widgets > h2{
some attributes...
}
.content > .pages .page-content .widgets > h2 > p{
some other attributes...
}
The DOM structure is as follows :
<div class = "page-content">
<div class = "widgets">
etc...
Many elements are described this way which are nested one in another.
Today, I need to rearrange this CSS in order to add a new div element between page-content and widgets so the structure becomes :
<div class = "page-content">
<div class = "a new class or no class definition at all">
<div class = "widgets">
etc...
Is there a simple way of doing this without having to modify each CSS definition, because there are so many nested elements that finding them all would be hard and time consuming...
And again, thanks for your wise advice !
You shouldn't need to make a change.
You don't have a direct descendant defined between .page-content and .widgets.
Therefore it doesn't matter if you have 1 or 100 elements in between .page-content and .widgets. As long as .widgets is a child of .page-content at some stage, this selector will still apply.
as per my knowledge you need not to change in the css. coz still .widgets will be a child of .page-content so this selector will still work for you.
you could check out more information about this here
Refer for more details
I have this html code here:
<div default_name="RandomName1">
<div name="RandomName1">RandomName1</div>
<div name="RandomName2">RandomName2</div>
<div name="RandomName3">RandomName3</div>
</div>
The property default_name on parent div changes from time to time. I would like to set the child div which has name matching default_name to background-color:red.
Like:
<style>
div > div[name=default_name_of_parent] { background-color: red }
</style>
I have no control over what the name values are, users set it. Is this possible via style sheet?
Thanks
This can be done, if you make a rule containing a selector for each possible “combination”, like so:
div[default_name=RandomName1] > div[name=RandomName1],
div[default_name=RandomName2] > div[name=RandomName2],
div[default_name=RandomName3] > div[name=RandomName3]
{ background-color: red }
http://jsfiddle.net/wc5whfwa/
But j08691 is totally right with their comment – this should be avoided at all cost if possible, data- attributes would be the way to go.
I have a nested html like this:
<div id="feautred">
<div></div>
<p></p>
<ul></ul>
<dl></dl>
</div>
For normal markup I could use #featured > div but here is not only the div is nested. There may be anything. So, how can I use #featured > ???? selector here?
Doing #featured > * will select all inner children what I don't need! I want only main children elements to be selected.
You can use *:
#features > *
from specification:
The universal selector, written as a CSS qualified name
[CSS3NAMESPACE] with an asterisk (* U+002A) as the local name,
represents the qualified name of any element type.
Maybe something like this?
#featured + p { }
This will select all paragraphs that are following #featured.
I'm working on some CSS from a tutorial, a div has this class:
<div class="related products">
How can I reference it in the stylesheet?
The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:
.related { color:#ff0000 }
.products { font-size:12px }
If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:
.related.products { font-weight:bold }
And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.
div.related.products is the general method
You reference it by div.related.products which literaly translates to "a div with class of related and class of products".
Or, you could reference it by using either class names, since it will catch both.
jsFiddle Example.
In the css, just put the name class of the div by doing this:
.related products {
/*styling to go here*/
}
Now any styling within the related products class will be applied to that div.
is there a way to select multiple div with css??
like
div id="text-box4"
div id="text-box5"
div id="text-box7"
etc
Native to ie7,ie8 and any other browser that accepts "substring matching attribute selectors" (cf. http://www.w3.org/TR/css3-selectors/), you can use the following syntax to select elements with multiple similar ids:
div[id^='text-box']
This basically says to the parsing engine, "select all div elements that have an id attribute which begins with 'text-box'
QRC:
[attribute^='text'] = attributes that STARTS with 'text'
[attribute$='text'] = attributes that END with 'text'
[attribute*='text'] = attributes that CONTAINS 'text'
CSS doesn't have a wildcard for that.
However if you use jQuery you can:
http://api.jquery.com/attribute-contains-selector/ or
http://api.jquery.com/attribute-contains-word-selector/
<div id="text-box4"></div>
<div id="text-box5"></div>
<div id="text-box7"></div>
<script>$("div[id*='text-box']").css("color", "red");</script>
like this?
#text-box4,
#text-box5,
#text-box7 {
/* your properties here */
}
CSS classes are designed for selecting multiple elements:
<div id="text-box4" class="my-text-box"/>
<div id="text-box5" class="my-text-box"/>
<div id="text-box7" class="my-text-box"/>
maerics' answer is correct. The CSS selector used to select the divs in that case would be:
.my-text-box {
/* Styles go here */
}