I would like to select a div within a div by specifying the ID.
HTML with specified ID
<div id="divOuter">
<div id="divInner">
</div>
</div>
And if I want to select divInner by using ID selectors in more to the point style what should I use?
I tried
div#divOuter> div#divInner
but cannot make it work.
As IDs have to be unique,
#divInner
is sufficient.
If you have more elements with the same ID you have to change that (you might want to use classes instead).
Update:
Ok, I got your point. But your selector is correct: http://jsfiddle.net/fkling/AsPam/
Either you have another rule that overrides this one, or your structure is different.
Update 2:
Oh, as others have noted , the child selector is not supported by IE6. You have to omit it then:
div#divOuter div#divInner
As IDs are unique all you really need is
#divInner
{
/*styles*/
}
This will select the ID attribute of the HTML element and apply the styles.
If you need to repeat the styles to more than one element, use a class
.divInner
{
/*styles*/
}
#divOuter div{...}
or
#divInner{...}
For starters (and I know this might be a typo), have you checked the spelling?
When it comes to the selection, you seem to want to use the id tag, in other words, all you need is to do as everyone above says: #idInner{...}
Related
Consider a component c with html
<form id="someID"[formGroup]="codeEditorForm" novalidate>
</form>
with css
#SomeID{
color:grey;
}
If C gets included in a parent component P two times then wouldn't the id get duplicated as well which should not happen in html
Question 1 - should I not use id in Angular?
Question 2 - how shall I then write css rules without using id?
You can use IDs but generally you don't need to do it.
Angular scopes the styles automatically, so a class defined in one component won't affect a class with the same name in another component.
<form id="someID" class="my-form" [formGroup]="codeEditorForm" novalidate>
</form>
.my-form {
color: green;
}
Also note that you should make sure that there is always a space after you define a property. In your posted example there was no space after someId" Maybe it doesn't matter in this case but I guess it's better to start looking out for small things like this right away.
As far as I know there are there are two differences between id and class.
First is that id is used for single specific element, while class can target multiple elements, this means that you normally would use id selector if you are sure that an element will not be repeated, something like navbar.
And the second one is that id selector is more specific than class selector, this means that if there are any conflicts of styles, rules written in id selector override rules written in class selector
Normally you would not use it to override rules as there is other way to do it, so in order to decide which one to use all you need to do is think about this >> is the element you are giving id to really gonna be unique?
Angular support id on html. But as you are loading multiple times the 'C' component on your 'P' component,so the Id will be duplicated. So better you use class instead of id on your html..
<form class="yourClass"[formGroup]="codeEditorForm" novalidate>
</form>
On your 'C' component's css,
.yourClass{
color:grey;
}
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 9 years ago.
I am learning HTML. Can someone please tell me what is the difference between class and id and when to use one over the other? They seem to do the same thing
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycolor1 {color: red;}
.mycolor2 {color: red;}
</style>
</head>
<body>
<div id="mycolor1"> hello world </div>
<div class="mycolor2"> hello world </div>
</body>
</html>
They do not do the same thing.id is used to target a specific element, classname can be used to target multiple elements.
Example:
<div id="mycolor1" class="mycolor2"> hello world </div>
<div class="mycolor2"> hello world2 </div>
<div class="mycolor2"> hello world3 </div>
Now, you can refer all the divs with classname mycolor2 at once using
.mycolor2{ color: red } //for example - in css
This would set all nodes with class mycolor2 to red.
However, if you want to set specifically mycolor1 to blue , you can target it specifically like this:
#mycolor1{ color: blue; }
Read the spec for the attributes and for CSS.
id must be unique. class does not have to be
id has higher (highest!) specificity in CSS
Elements can have multiple non-ordinal classes (separated by spaces), but only one id
It is faster to select an element by it's ID when querying the DOM
id can be used as an anchor target (using the fragment of the request) for any element. name only works with anchors (<a>)
Classes should be used when you have multiple similar elements.
Ex: Many div's displaying song lyrics, you could assign them a class of lyrics since they are all similar.
ID's must be unique! They are used to target specific elements
Ex: An input for a users email could have the ID txtEmail -- No other element should have this ID.
The object itself will not change. The main difference between these 2 keyword is the use:
The ID is usually single in the page
The class can have one or many occurences
In the CSS or Javascript files:
The ID will be accessed by the character #
The class will be accessed by the character .
To put it simnply: id is unique to just one element in the whole HTML document, but class can be added to numerous elements.
Also, ID properties have priority over class properties.
ids and classes are especially useful if you plan on using javascript or any of its frameworks.
class is used when u want to set properties for a group of elements, but id can be set for only one element.
ID's must be unique (only be given to one element in the DOM at a time), whereas classes don't have to be. You've already discovered the CSS . class and # ID prefixes, so that's pretty much it.
ID provides a unique indentifier for the element, in case you want to manipulate it in JavaScript. The class attribute can be used to treat a group of HTML elements the same, particularly in regards to fonts, colors and other style properties...
ID is suitable for the elements which appears only once
Like
Logo sidebar container
And Class is suitable for the elements which has same UI but they can be appear more than once.
Like
.feed in the #feeds Container
the Id selector is used when referring to a single unique element.
The Class selector referrers a group of elements.
For example, if you have a multiple buttons that look the same, you should use class="mybutton" to have consistent styling.
In terms of performance:
CSS selectors are matched from right to left.
Therefore, .myClass should be "faster" than #myID because it misses out testing.
The performance speed is negligible for normally sized pages and you will probably never notice a difference so it's mostly just about convention.
Here is more info on why css is browsers match css selectors from right to left
This becomes confusing to me:
<div class='wrapper'>
<div id='redRose' class='roses'>...</div>
</div>
<div class='wrapper'>
<div id='redRose' class='roses'>...</div>
</div>
<div class='wrapper'>
<div id='redRose' class='roses'>...</div>
</div>
I can see the obvious difference between 'redRose' and 'roses', but why he assigns the same id 'redRose' to multiple divs? It seems it looses id's unique identification character here. Did I miss something?
Update:
Thanks for everyone's help. I wish I could mark everyone's answer correct.
This is not valid; the id must be unique. Class names can be shared however.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Well, the obvious thing to say is that markup is wrong.
Id is unique, class is not.
http://css-tricks.com/the-difference-between-id-and-class/
There could be an id of redRose to a parent container if one were to want to target something like #redRose div or #redRose .roses but as it stands the css for this would only target one of the id's specified and is just wrong to begin with.
Using the same ID more than once on any given page is wrong. It should never be done and will break code that references that ID. The proper way to do it is with classes. A css class can be assigned multiple times, whereas a ID can only be assigned once.
http://css-tricks.com/the-difference-between-id-and-class/
ID's are unique
Each element can have only one ID Each page can have only one element
with that ID
Classes are NOT unique You can use the same class on multiple
elements. You can use multiple classes on the same element.
When should I use a class and when should I use an id in html for styling my page.
Example: <h1 class="ClassName">
<h1 id="IDName">
IDs are unique, whereas classes can be reused. You could also use both simultaneously:
<h1 class="ClassName" id="IDName">
As a general rule of thumb, use id's as individual identifiers, and classes for common markup that you intend to reuse.
You use id if you have only one element of a kind and class if you have many.
For example you have a list:
<div class="listItem">Item 1</div>
<div class="listItem" id="selected">Item 2</div>
<div class="listItem">Item 3</div>
Here you can get the selected element using javascript: document.getElementById('selected').
You should never have the same id twice but you should always have a class many times.
Also have a look at the documentation, it explains it very nicely.
Use id to identify elements that there will only be a single instance of on a page or single div . For instance, if you have a single navigation bar that you are placing in a specific location, use id="navi"., for header used id="header_sectoin", for any used function in jquery than used to id id="slider_left"
Use class to group elements that all behave a certain way. For instance, if you want your company name to appear in bold in body text, you might use .
Example:
Text
#header_section {font-color:#fff}
.header_section {font-color:#000}
The text would be white.
For details :
http://css-tricks.com/the-difference-between-id-and-class/
id is unique. For example if you want to assign a css style only to one of the tags you cand relate them with id. class can be reused. for example if you want to assign a css style to all of the <a> tags you must use class.
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
There are no browser defaults for any ID or Class
Adding a class name or ID to an element does nothing to that element by default.
Elements can have BOTH
I understand that there is a *.className selector since there can be multiple html elements with class=className.
But for the ID attribute which should be unique, why does *# exist and when do we use it?
Thanks.
The * matches any element, not all elements. It is called the universal selector
So *#myid matches any element with id equals myid. In CSS, it does not really matter and it is equivalent to #myid.
Source
Just because IDs are supposed to be unique doesn't mean they are. You can create multiple elements with the same ID, but you shouldn't. CSS doesn't care anyway, lack of uniqueness would just screw with Javascript. For example, if you have this:
<div id='blah'>blah</div>
<div id='blah'>blah</div>
<div id='blah'>blah</div>
<div id='blah'>blah</div>
Then jQuery('#blah') returns [ div#blah ], whereas jQuery('*#blah') returns [ div#blah, div#blah, div#blah, div#blah ].
jsFiddle Demo
Combining the universal selector with the ID, class, or attribute selectors makes no difference: #foo is the same as *#foo, .bar is the same as *.bar, and [baz] is the same as *[baz]. Therefore, you don't want to be using the universal selector in these scenarios.