<td>
<div class="m"><span class="a1">1 Puolimas</span></div>
<div class="d">po <span id="timer1">2:25:10</span></div>
</td>
How to select "2:25:10" with css selector if i can't use (span[id=timer1]) because id could be different.
I have tried:
span.a1 ~ span
But this selector do not work.
You could try here: http://jsfiddle.net/cSQcT/
There is no way using CSS to navigate from a1 and get to timer. You cannot navigate backwards/up with CSS only downwards/adjacent. You'll need to use javascript or start from the top down like .d > span.
You can do it like this:
.m + .d > span { color: blue; }
Also check this for the + selector: CSS next element
However, you cannot go up one level (from the span.a1).
Your selector must start from the same or upper level.
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>
For markup such as:
<span class="location-title-container">
</span>
<div class="content-panel">
<div class="floor-left-panel"></div>
<div class="floor-right-panel"></div>
</div>
How do I select .floor-left-panel when hovering over .location-title-container?
You have to use a adjacent selector to get the element right after it.
Your selector would look like this:
.location-title-container:hover + .content-panel .floor-left-panel { … }
Just for your information, you should not use :hover on span tags.
They are not accessible by default. You should add some WAI ARIA role tags.
.location-title-container:hover + .content-panel .floor-left-panel {} is the selector you need.
The plus sign is used to select the next adjacent element in the DOM.
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.
How to change the color only from text except everything is between tags ?
Sample text:
<b>A7</b> <b>D</b>
this is a test
<b>A7+</b> <b>G9</b>
this is a test
Assuming that all of that text is wrapped in a parent element (I've used <div>, but almost any other element would suffice), as such:
<div>
<b>A7</b>
<b>D</b>
this is a test
<b>A7+</b>
<b>G9</b>
this is a test
</div>
Then you can't change "all the text except the <b> tags", because CSS won't allow you to style the text without affecting the colour of the the <b> elements, you can, however, style the div and then 'unstyle' the b elements:
div {
color: #f00;
}
div b {
color: #000;
}
JS Fiddle demo.
To do this with jQuery (and, honestly, from the information you've posted jQuery seems unnecessary), you'd have to create wrapping elements for each of the strings of characters that are not wrapped in b elements and then directly style, or add a class to, those elements:
$('body').contents().filter(function(){
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
}).wrap('<span />').parent().css('color','red');
JS Fiddle demo.
References:
contents().
filter().
parent().
wrap().
Try:
body{color:red;}
b{color:black;}
Fiddle here.
You could use jQuery like this:
$('body').css('color', '#FFCCFF');
$('b').css('color', '#000000');
But if you can do it in CSS it would be better:
body {
color: #FFCCFF;
}
b {
#000000;
}
Since you tagged this as jquery, I just provided a solution for this with jquery, You may wrap the html which was written by you in a paragraph tag like below. And then you have to use the .addClass function of Jquery to set different classes with different colours for that both paragraph and bold tag.
HTML
<p><b>A7</b><b>D</b>
this is a test
<b>A7+</b><b>G9</b>
this is a test</p>
CSS
.Paragraph{
color:red;
}
.boldtext{
color:black;
}
JQUERY
$('p').addClass('Paragraph');
$('p > b').addClass("boldtext");
DEMONSTRATION