#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
Related
I need to override the height of all the child of a parent except a child and his child's. how can i do that ?
I use the id of the parent and the not option #parent *:not(here i want to select a child which is a parent of another).
Please can anyone help me thanks a lot <3.
CSS doesn't have parent selectors, so there's no way to say :not(any child which is itself a parent) automatically unfortunately. I believe you'll have to apply a class to every child which is itself a parent. And then you'll need a second selector to catch the grandchild. So:
#parent > *:not(.haschildren),
#parent > *:not(.haschildren) > * {
}
Or just give the same class to every tag involved. But this is probably more typing overall than just using two selectors:
#parent *:not(.tagswewanttoignore) {
}
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.
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>
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.
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>