A question the instructor asked during a lecture:
Which CSS selector will select only the word "bar" for styling?
<p class="a">foo, <span class="a">bar</span></p>
span.a
p .a
.a span
All of these
The answer given was (4).
(1) is obvious because only bar (and not foo) can affected by a span selector with class a, but (2) and (3) are less obvious. Would someone break down what is happening in each case?
Let me elaborate each for you
span.a - This will select all the span tags in a document having class a
p.a - This will select all the p elements having class a
p .a - This will select all the elements having class a nested under p
.a span - This will select all the span tag nested under class a
Explaining your case
<p class="a">foo, <span class="a">bar</span></p>
a.span will change the bar color as it selects the span tag having class a
p.a will also change the bar color, as it is nested inside p tag having class of a. Hence span tag will inherit the color. (Also, I would like to point out here, this selector will change the color of foo as well)
p .a will select the bar as well, as the span tag having class a is nested under p
.a span will also apply color to the bar word as span is nested under a tag having class a
So technically answer is ALL OF THESE WILL CHANGE THE BAR COLOR
All of the above is the correct answer, because:
span.a /* Selects all span elements with class 'a' */
p .a /* Selects all child elements of p that have class 'span' */
.a span /* Selects all child span elements of elements with class 'a' */
Parent and child relationship. In all of these you are choosing the parent and navigating throught to the first child. If you had a list you would have to navigate through selectors with a nth child selector.
It is all pretty straight forward, here is an english walk through of the interpretation for CSS:
2) find <p> (the line), then inside <p> use class="a", so that's <span class="a">bar</span>
3) find class="a" and then inside of it <span>
Related
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?
My HTML:
<p>Doggies</p>
<p class="green_guys">Froggies</p>
<p>Cupcakes</p>
<p>Piggies</p>
An all inclusive sibling selector (as I wish it to be), when used to select green_guys' siblings, would select the doggies cupcakes and piggies.
Other Selectors:
The + selector (a.k.a. adjacent sibling selector) would only select the cupcakes:
.green_guys + p {
/* selects the <p> element that immediately follows .green_guys */
}
The ~ selector (a.k.a. general sibling selector) would only select the cupcakes, and piggies:
.green_guys ~ p {
/* selects all <p> elements that follow .green_guys */
}
There is no sibling combinator that looks backward or around, only the adjacent and general sibling combinators that look forward.
The best you can do is determine a way to limit selection only to these p elements with the same parent, and then select the p children that are :not(.green_guys). If the parent element has an ID of #parent, for example, you can use this selector:
#parent > p:not(.green_guys) {
/* selects all <p> children of #parent that are not .green_guys */
}
However the above will still match your p elements even if none of them have the class. It is currently not possible to select the siblings of an element only given the existence of said element (which is the purpose of a sibling combinator — to establish a relationship between two sibling elements).
Selectors 4's :has() will hopefully rectify this without the need for a preceding-sibling combinator, resulting in the following solution:
p:has(~ .green_guys), .green_guys ~ p {
/* selects all <p> elements that are siblings of .green_guys */
}
This will not match anything if none of the children of the parent element have the class.
Not that I am aware of. There isn't a siblings selector either.
This might work, though:
#parent_of_green_guys > p:not(.green_guys) {
foo: bar;
}
Or if you aren't looking for ps with class attributes:
#parent_of_green_guys > p:not([class]) {
foo: bar;
}
My scenario was a little different but I wanted to select siblings of an input element to display one while it was active and another if it was left invalid.
My html was like this and I was unable to select the invalid text.
<input name="importantAnswer">
<div class="help-text"></div>
<div class="invalid-text"></div>
I was able to get around it by embedding the siblings in an adjacent one and using child selectors on that.
<input name="importantAnswer">
<div class="messages">
<div class="help-text"></div>
<div class="invalid-text"></div>
</div>
.help-text, .invalid-text {
visibility:hidden;
}
.input:active +.messages > .help-text {
visibility:visible;
}
.input.invalid:visited +.messages > .invalid-text {
visibility:visible;
}
And it worked.
I actually found 3 ways to do this:
Solution 1
.parent > p:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/cafipun/edit?html,css,output
PROS: quick and easy.
CONS: you need to know the parent selector (so that's not a super portable solution).
Solution 2
p ~ p:not(.green_guys),
p:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/seripuditu/edit?html,css,output
PROS: there is no need to know the parent selector (it can be very good to be used in generic cases).
CONS: it risks to be too generic (be careful, for example, if you have other p around your HTML!).
Solution 3
Small variant of the Solution 2 (to avoid the CONS). In this case you specify the sibling selector to get a more specific context.
p.siblings ~ p:not(.green_guys),
p.siblings:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
Demo:
https://jsbin.com/hakasek/edit?html,css,output
PROS: it is a portable solution, there is no need to know the parent selector (it can be very good in generic cases) and there is no worry to have conflict with other elements.
CONS: all siblings have to be well defined (with a class or an attribute for example).
#contentpage div
Does this mean select the div that has id #contentpage?
I am getting some bad layout. I am trying to select the div with the id #contentpage.
Could somebody also please tell me what the following css mean:
#myid div a
.myid a h
div #myid a
#myid div a
<anytag id="myid"><div><a rel="match">...
.myid a h
<anytag class="myid"><a><h rel="match">...
div #myid a
<div><anytag id="myid"><a rel="match">...
If you would like to match a div with id #myid, then either ignore the fact that it's a div (ids are unique anyway) or match it as follows:
div#myid
#myid div a
This will match an a within a div within an element with the id of myid. When I say "within" I mean anywhere within at any nesting level. The others are all the same but with different elements in different orders.
If you want an element with the id of contentpage you simply use #contentpage. If for some reason you wanted to specify that it was a div it would be div#contentpage.
if you want to modify the styling of the div with the id of contentpage then you would do the following
div#contentpage { //input styling here }
OR
#contentpage { //input styling here }
it also looks like you are trying to get at elements under the div these can be accessed in a number of ways but this is usually what I do
<div id="contentpage"><div><a></a></div></div>
#contentpage a { //stying }
#contentpage div a { //styling }
#contentpage {color:red} will select whichever element with id contentPage
#myid div a will select <a> elements that are inside <div> that are inside an element with id myid
.myid a h as far as I know there is no <h> element ? Without the h, it would select all links within any elements with the class myid (in this case myid is a dubious name, then, since its not an id per se)
div #myid a will select links inside of an element with id myid, but only if this element is within a <div>. It won't work if the element myid is a direct children of <body> for example
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>
In the IUI css file, they use the following selectors:
body > *:not(.toolbar)
body > *[selected="true"]
What does the >, *:not() and *[] mean?
Thanks.
> means "is a child element of". So body > *:not(.toolbar) matches *:not(.toolbar) that is a child of body.
*:not(.toolbar) matches any element that does not have the class .toolbar.
*[selected="true"] matches any element with the selected attribute equal to true.
Keep in mind that the last two (*:not() and *[] are part of the CSS3 spec and you usually can't rely on them for cross-browser CSS compatibility. They are, however, fully supported in WebKit which is what the iPhone (and consequently iUI) use.
> means a direct child
* is a universal selector (everything)
:not() means anything except what's in the parentheses
*[] means anything that matches what's in the brackets
In your case:
body > *:not(.toolbar) // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"] // means any element immediately under the body tag where the selected attribute is "true"
> and * are defined in the CSS 2.1 specification. The :not pseudo class and the [] selector are defined in the CSS 3 specification.
See: http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/css3-selectors/ for more info.
> - Child selector
I.e.
div > p > b {
font-size:100px;
}
This will select all b tags inside p tags inside div tags.
:not(..) - not selector
Matches any element on the page that does not meet the criteria in the parenthesis of the not statement. i.e.
div:not(.toolbar)
Will match any div that does not have the class toolbar
[attr='val'] - attribute selector
This matches any element where the attribute matches the specified value. Example if you want to make all checked check boxes red.
input[checkec='true'] {
background-color:red;
}
You should Google CSS 2.1 selectors for more information.
means child element
.cont > div {
color: #fff;
}
This would be:
<div class="cont">
<!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS
It only affects the below div. Not the p.
so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
<div>jabberwocky</div>
<p>lorem ipsum</p>
</div>