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>
Related
I have this structure
<div class ="wg-block">
...
<h4 class ="number" >
"Text"
I have to make sure that the element h4 with text "text" is in div.
I try this:
.useXpath()
.waitForElementVisible('/div[contains(#class, "wg-block")]/h4[text()="Text"]',1000)
but have an error.
How can I correctly be sure in visibility of this element?
Try to replace
'/div[contains(#class, "wg-block")]/h4[text()="Text"]'
with
'//div[#class = "wg-block"]//h4[normalize-space(text())="Text"]'
Note that starting / applicable for root element (which is html, but not div) and also / means direct child. So /div/h4 means h4 which is the direct child of a root element div.
You should use //div//h4 to match h4 which is descendant of div that is located somewhere in DOM
text()="Text" could be applied to match element <h4>Text</h4>,
but if you want to match
<h4>
Text
</h4>
you need to get rid of spaces and new line characters. In this case you can use normalize-space(text()) method or contains(text(), "Text")
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 usually just figure this out as I go and eventually it works but I am trying to work out what the difference really is so I can become a bit more adept with CSS, that in mind what is the difference between...
H2.class
and
H2 .class
and can I do....
.class.H2 ?
H2.class
<h2 class="class">stuff</div>
H2 .class
<h2><span class="class"></span></h2>
The first H2.class will apply a style to this:
<h2 class="class"></h2>
The second H2 .class will apply a style to this:
<h2><ANY class="class"></ANY></h2>
And lastly the third .class.H2 will apply a style to this:
<ANY class="class H2"></ANY>
Have a read up on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax?redirectlocale=en-US&redirectslug=CSS%2FSyntax
1) H2.class means <h2 class="class">..
<h2> having class 'class'
2) H2 .class means <h2><div class="class">..
<h2> having descendent '.class'
3) .class.H2 means <h2 class="class">..
same as first
H2.class
means the h2 tag with class="class"
H2 .class
Means an element inside h2 tag with class="class" such as:
<h2>THis is <span class"class">it</span></h2>
And so on..
.class.H2 ?
means the element with class of class with a class of h2.
I'm trying to select elements based on the class of a previous element of the same type.
For example, given the following HTML, select the third span element:
<div>
<span class="red"></span>
<span class="red"></span>
<p>
<span id="select me"></span>
</p>
<span id="don't select me"></span>
</div>
I want that span element to have the same properties as the previous span element because it has the class, "red."
Another way to say this: select an element with the class, "red," as well as the next element of the same type, regardless of class.
I'm having a tough time wrapping my head around this. Better than nothing would be a way to select the next sibling of the same type instead of just any following element. For example, span.red ~ span would be okay if it didn't mean "span element with ANY previous span sibling with a class red."
Thanks for any help.
Here are more examples:
<div>
<span class="red"></span>
<span id="select me"></span>
<p>
<span class="red"></span>
</p>
<span id="select me"></span>
</div>
In the example above, the second span element is chosen because the first span has a class, "red."
The last span element is chosen because the third span has a class, "red."
<div>
<span class="red"></span>
<span class="red"></span>
<p>
<b></b>
</p>
<span id="select me"></span>
</div>
The main reason for this is that I have elements in an editable div. They are numbered with a css counter. Some elements may be grouped together like a figure, i.e. 2a and 2b, while others are not, so I could end up with elements 1, 2a, 2b, 2c, 3, etc. The class name I use just tells me that it's a "sub" element and to increment the sub counter but not the main element counter. Not having a class for the next element after a bunch of sub elements tells me it's the last sub element and I should reset the sub counter. The reason I have it set up this way is because I want to be able to move around the elements and have the numbering update automatically. Also, it's easy to change whether something is a sub element just by toggling the class name.
I'd like to have another case or two to test this with, but this seems to work for your example:
span.red ~* span {
background: red;
}
jsFiddle example
There's no way to say "sibling of the same type" in a selector. But you can use the sibling selector following a selector of your choice, and combine these into a single selector that meets your needs, such as:
span.red + span, div.red + div
{
}
If it's only nested on level you could try this :
.red + * > span {
color: red;
}
What is the use case for this? Why not just add red to all elements you want to be styled the same way?