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.
Related
Have worked example:
.hov:hover+.next+.result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
jsfiddle
When hover on first element the third element have result. Any shorthen version of + + if i need more + +, something like .hov:hover+div:nth-child(2) - but this not work.
+ is Adjacent sibling selector in CSS, so it requires both selector elements to be next to each other. Instead, you can use ~ which is General Sibling selector here, which doesn't require the two elements to be next to each other.
.hov:hover ~ .result {
color: red;
}
<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>
There is no way to make what you want to do shorter. This is simply the way the selector works. The solution you proposed (element + next(3) or whatever syntax you whish to use there) does not exist.
Your selector has some issues if you change the structure of your HTML (for example add a paragraph in between). What you can do to make your code more reliable is answered by Nisarg and use the ~ selector to select elements.
Why not change the HTML and make it more reliable? What you are doing here is working for you maybe, but if you make changes to your HTML this CSS breaks. Try adding classes for all items you want selected. Don't worry if you have three or four classes on elements, that is completely normal.
.hov:hover {
color: red;
}
<div class="hov">hover</div>
<div class="next hov">next</div>
<div class="result hov">result</div>
What does the following CSS syntax mean?
.x-data .x-time span
it is a selector for a span that resides in a div (or anything) with class .x-time, which inturn is nested inside a class .x-data
for example, if you had the css like:
.x-data .x-time span {
font-size: 12px;
color: red;
}
and then a structure like this:
<div class="x-data">
<div class="x-time">
Time: <span>12:00</span>
</div>
</div>
then the 12:00 is going to be in font size 12, and in red. where as "Time:" part is just going to follow the inherited format.
It targets the span elements inside elements with class "x-time", which, themselves, are also inside element with class="x-data".
Selects any span element that is a descendant of any element with a class attribute that contains the word x-time that is a descendant of any element with a class attribute that contains the word x-data.
via SelectOracle. I recommend giving Selectutorial a read too.
its like saying Donkey's Tail's Hair.
so .x-data will be donkey
.x-time will be tail
span will be hair!!
so .x-data's .x-time's span.
get it?
any element with a class of '.x-data' containing any element with a class of '.x-time' containing any <span> will be styled.
eg.
<p class="x-data">
lipsum
<span class="x-time">
<span>lipsum</span> <!-- only this guy is styled -->
<strong>sdadsa</strong>
</span>
<span>dolor</span>
</p>
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.
So I want to rig up some css rules for interview transcripts. The format I have in mind looks something like this:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>
<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>
I'd like the paragraph to be a particular colour based on the class of the preceeding heading. Is there a way to do this, as it would make the html markup significantly simpler.
You can use following-sibling combinator: +
h2.interviewer + p { /* style goes here */ }
Sure:
h2.interviewer + p {
color: red;
}
I'm not entirely sure how to do it with multiple paragraphs though. Perhaps if you encased the entire set of paragraphs in a div:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
<p>Is it ok if I ask you a question now?</p>
<p>More text here.</p>
</div>
<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
<p>Sure go ahead.</p>
</div>
You could then do this:
h2.interviewer + div {
color: red;
}
By the way, there are better HTML elements for displaying a conversation, like the newly introduced <dialog> tag
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
UPDATE:
The <dialog> element never made it into HTML5. It does not exist.
I use the following code on my page:
<div id="itemstable" class="item_type1">
...other divs here...
</div>
And in my CSS file I have this code:
.item_type1 div {
background-image: url(images/type1.giff);
}
the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.
Is this possible?
EDIT: I'm looking for something like this:
<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>
(If I'm understanding the question correctly:)
Think about using a different ID/class scheme. I don't know about the further specifics of your structure, but id="itemstable" class="item_type1" seems slightly redundant to me. Can itemstable be anything else than item_type1? Try to apply more generic class names and keep the specific cases for IDs.
Failing that, you can add another class that is responsible for adding the background image: class="item_type1 item_types".
EDIT
Since it seems sheer mass is the main problem (not applying the style as the title suggests) it's probably best to dynamically insert a style in the page header. Something along the lines of:
<head>
...
<style type="text/css" media="screen">
<?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; }
</style>
</head>
Inline styles can only apply to the element directly, not one of its children. I.e.:
<div style="background: ...;">
The background only applies to this one div.
You can't use selectors in inline styles like:
<div style="div { background: ...; }">
I think including a little more of your HTML would make your question easier to understand.
You can certainly include multiple rules in a compound selector:
.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
background-image: url(xyz.gif);
}
But since you are pulling images from the database dynamically, you will need to either include them in your dynamic code-- in the divs themselves, or dynamically create CSS as suggested above:
<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>