I currently have the following code.
<div id="1">
<div id="2">
<div id="3">
</div>
</div>
</div>
But I cant seem to figure out how I select the div 3 (??).
Any ideas ?
Outside of HTML5 an id beginning with a number is invalid HTML; however with CSS you could, ordinarily, select that div with the following:
As posted by Guffa, the #3 id-based selector in this answer is wrong, the #3 needs to be escaped to #\33 (though I'll explain no further (see his answer!), to avoid shameless plagiarism/repetition)
#3 {
/* CSS */
}
This approach uses an id-based selector (only one element in the document may use a given id, so this is a unique identifier), and is the id-name prefaced with the # sign.
The following, however, is still valid:
div > div > div {
/* CSS */
}
This approach uses the immediate child > combinator, and will select a div that is the direct child of a div (no intervening elements between the two) which is, itself, the immediate child of another div element.
References:
CSS Selectors, Level 1.
CSS Selectors, Level 2.
CSS Selectors, Level 3.
When you have an identifier that starts with a digit, you have to use a character escape to write the CSS rule to match it:
#\33 { ... }
The 33 is the hexadecimal code for the character 3.
If possible, you should avoid having an id that is a number. Using it gets complicated, both from CSS and from Javascript.
Related
I'm trying to select all code elements except the one that's a descendant of the pre element using a :not(~) selector. This post has a very similar answer but I'm having a hard time figuring out my problem.
<body>
<div><code>Div Code</code></div>
<pre><code>Pre Code</code></pre> <!-- Exclude only this -->
<Code>Body Code</Code>
</body>
This selector using :not(~) doesn't seem to work.
code:not(pre code) {
color:red;
}
The code selector selects all three, and pre code selects only the 2nd one, so shouldn't joining them using :not produce all three except the 2nd one?
What could be wrong here?
I could use a selector other than the :not(~) but it fits the best for my use-case since code element can be nested in other elements and I want to exclude only the descendants of pre.
Thanks in advance.
If your <code> is always a direct descendant of <pre>, you can use the direct descendant combinator to target it:
:not(pre) > code {
color:red;
}
<body>
<div><code>Div Code</code></div>
<pre><code>Pre Code</code></pre> <!-- Exclude only this -->
<Code>Body Code</Code>
</body>
Note: if you removed the >, intuitively, sure, it should work, but since it can target any ancestor, such as <body>, it'll match because body:not(pre) is true.
You can't do that. :not() works only for the tag itself, not parent tags that wrap it.
What you can do, is add a class to <code> like this: <code class="notpre"></code> and add a css rule like this:
code.notpre {
color:red;
}
You can read more about :not() pseudo-class here.
Edit 1: You can do this that way too, but it's not recommended because it's too "wide" and can affect some unwanted <code> tags. I'd recommend using class names like in the first solution I mentioned.
code {
color:red;
}
pre code {
color:initial;
}
<div><code>Div Code</code></div>
<pre><code>Pre Code</code></pre> <!-- Exclude only this -->
<Code>Body Code</Code>
Take a look at this example, simple enough:
http://jsfiddle.net/8YuKb/
Now look at this example:
http://jsfiddle.net/n223Z/1/
The ONLY difference between the two is the line
.text_left { text-align:left; }
is moved above the following line:
.title {
margin:4px;padding:6px;
background-color:black;color:white;
font-size:12pt;font-weight:bold;
text-align:center;
}
... and now the CSS does not work??? (at least not in IE)
Can someone please explain why???
I was under the impression that because the "text_left" selector was last in the list the text in the div should be aligned left (regardless of the order of CSS declarations) -- is that not the case????
I do not understand why it works in one case and not the other.
As you can see, the order of the classes in the HTML has no effect.
Both of the following are the same, as they are merely elements with 2 of the same classes.
class="title text_left"
class="text_left title"
On the other hand, the order of the elements does matter in CSS, as the stylesheet is read from top to bottom (cascade).
Thus text-align:left is being applied on both elements, yet due to the order in which they appear, it is overwritten by text-align:center, as it appears below it.
1.in html
class="title text_left"
class="text_left title"
has the same effect when they apply to the same element: the class sequence they appear in
html attribute has no effect in the final result
2.in css file:
.title {}
.text_left {}
when the two class apply to a element such as
<div class="title text_left"></div>
or
<div class="text_left title"></div>
the html has the same effect(as describe in 1), so the div will apply all rules in .title
and .text_left. if the same style has declared in both .title and .text_left. the rule
in .text_left will win (the one declared last in css file win when their selector has the
same specificity)
3.in css file
.text_left {}
.title {}
when an element has both the two classes, all style rule in the two class will apply to
the element, if two attrbute conflict, .title will win
maybe you mixed the word: the one declare last will win
it means: the sequence of css rule declare in source file effect the final result
not: the sequence of attribute declare in html element
I have some html that looks like this:
<div id="parent">
<div id="child"></div>
</div>
I want to apply a default background color to #parent except for when it contains a #child.
So the CSS should end up looking something like this:
#parent {
background: red
}
#parent:contains(#child) {
background: none
}
However, I can't get the :contains pseudo selector to work that way. Is there a way to achieve this?
:contains() was only intended to match elements containing certain text, not elements containing certain other elements. It is because of the complications associated with matching elements by text that there were almost no browser implementations, leading to :contains() being dropped from the spec.
Since there is no parent selector in CSS, and :has() (which does look at elements) only exists in jQuery, you won't be able to achieve this with CSS yet.
For the record, jQuery implements :contains() as well, but it does so according to the old spec, so it uses the name :has() for elements instead.
With jquery
if($("#child").length>0) $("#parent").css("backgroundColor","#fff");
Its not possible with pure css.
I have a div with an ID:
<div id="main">
What's the correct (or difference) between
div#main {
and
#main {
Regards,
There is a great doco on using efficient CSS selectors, focus on rules with overly qualified selectors:
ID selectors are unique by definition. Including tag or class
qualifiers just adds redundant information that needs to be evaluated
needlessly.
Instead of just applying the style to an element with id main, your selector will re-qualify the element by checking whether or not it's also a div (in that order). To clarify: css selectors are evaluated right to left, unlike same selector syntax when used in jQuery etc.
Re pixelistik's suggestion that div#main is more specific than #main - yes, that is technically correct, however if you have to resort to this to raise a rule's specificity, chances are the structure of CSS you're working on is not as thought through as it should be.
#main matches everything with ID 'main', whereas div#main matches only <div> elements with ID main.
Ideally, you should never have two elements with the same ID, so realistically the two don't make a difference, but there's probably performance related issues regarding whether specifying div makes it find the result faster.
So difference is that:
When you write div#main style will be only for <div> element.
When you write #main it can be used as style for <div>, <span>, <p>, etc.
And what recommend is hard to say, every developer it has it different. So i using for example
span.<nameClass> when is nested in <li> for example.
#nav li span.href a {
...
}
I think it's used when you want that someone class with specific name can have only one element.
So when your write span#href it will works only for <span id="href">Simply dummy text</span> not for others. When you write #href it will works for <span id="href">Simply dummy text</span> or Link but both are correct when you also asking about this. Differences i wrote above.
Both are correct.
div#main is more specific than #main, which means that styles defined with the first selector will override the ones of the second.
Here's a good introduction to CSS specifity:
http://htmldog.com/guides/cssadvanced/specificity/
This question already has an answer here:
Matching the first/nth element of a certain type in the entire document
(1 answer)
Closed 7 years ago.
I want to match the first H1 element in my whole document. However, right now I'm faced with a problem.
I'm using the following CSS selector:
h1:first-child {
...
}
However, it matches several H1 tags on the page. How can I make it match only the first one?
There is no such selector; all available selectors can only match siblings, not the order of elements of the same name across multiple parents. Your selector would be very brittle anyways.
Instead, simply markup the first h1 with an appropriate class, or match its structure. For example, you might want to match
body>header:first-child>h1
instead.
That is because the selector does now look at the entire document, it looks at the parent. Any time an <h1> is the first child of any element, it will match to that selector. If you only want it to apply to one single <h1> in a document, considering giving it a separate class or ID, or selecting it more specifically based on where you expect it to appear.
For example, on my site I separate each chunk of text into a <div class="box"> which are all present in the <body> of the document. So if I wanted to match only the first <h1> in the document, I could do something like this:
body > .box:first-child > h1:first-of-type { }
This would select the first box only, and then match the first <h1> in that box, simulating the "first <h1> in the document" effect (assuming the first box has an <h1>, which on my website is always true if one exists). I assume you wanted to use the :first-of-type selector here, because the first <h1> in a document doesn't necessarily have to be the first child of a parent.
are you allowed to cheat with jQuery? some times jQuery (javascript) provide(s) elegant alternatives beyond the html and css limitations
$(document).ready(function() {
$('body').find('h1:first').css('color','#0000ff');
}); // ready
That will match every h1 that is the first child of its immediate parent. so if you have like
<div>
<h1></h1>
</div>
<div>
<h1></h1>
</div>
both of those h1 tags are first-children.
Try h1:first