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.
Related
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 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.
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.