I'm a little confused about HTML classes and IDs, as I'd like to use them BOTH to describe an HTML element. Is this valid and supported by most browsers?
The motivation for me to use both is this:
I have a CSS style that I would like applied to multiple elements.
I have some AJAX and Javascript that will manipulate those same elements, so I need a way to identify which element is which using an ID.
So I'd like to use an id to identify each element for JS manipulation AND at the same time I would like to specify a class so that the same style is applied from the same css.
An ID would be unique to only one item, where a class can be used to group many items together. You can use them together as you stated, ID as a unique identifier for Javascript and the class to markup with CSS.
Search for html class vs id to get many articles about this topic.
Example:
<ul>
<li class="odd" id="item1">First Item in the List</li>
<li class="even" id="item2">Second Item in the List</li>
<li class="odd" id="item3">Third Item in the List</li>
</ul>
Yes, it is perfectly valid to use both the ID and Class properties in one element. Example:
<div class="infoBox" id="myUniqueStyle"> *content* </div>
Still, keep in mind that an ID can only be used once (hence its name), while you can use classes as many times as you'd like througout a document. You can still use both the ID and the class to apply styles, while only the ID is a simple way of reaching the element through javascript.
A good way of doing it is applying IDs to all elements that you know are unique (header, navigation, main containers etc.), and classes to everything else.
"Is the" applies to elements using ID: "This is the navigation bar", "this is the header"
"Is a" or "is an" applies to elements using classes: "This is a blogPost", "this is an infoBox" etc.
You can definitely use both if you need to.
An ID is typically used to identify structural sections of your site - you should have only one element with a particular ID and any element can have only one ID.
A class is used to set styles which might be used in more than one place in your HTML file - any element can have multiple classes set.
A typical HTML document using both IDs and classes might be something like
<html>
...
<body>
<div id="header"></div>
<ul id="nav" class="full-width dark">...</ul>
<div id="content">
<div id="important-container" class="class-set-by-javascript another-class-set-by-javascript"></div>
</div>
</body>
</html>
Yes, any normal browser should allow the setting of CSS classes regardless of element id. However, setting styles on a specific element (using ids, for example) may override styles set through a CSS class.
Just a very obscure note about combining class and id in your CSS declarations, there's a bug with IE6, if you have:
two or more pages which have an
element with the same id
those elements have different
classes
you're styling them using an
#idname.classname rule
then only the first rule in the stylesheet will take effect.
See this page for details
Yes it is valid in all browsers. ID expresses just the unique IDentification of your html control through others, and class applies some style to it. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.
Related
I don't know what is different between (I) and (II) ?
whether these class is same for use in a (js file/css file) or not
different ?
I: <div class="start-box active">
II: <div class="start-box">
in I you have two class start-box and active but in II you have just one class.
you can use js to add or delete class from element. and with css you can set some css property for the active when use event handler
you can read this link HTML Event Attributes
The class name attribute of an element accepts a single class name, or a space separated list of class names.
So in
<div class="start-box active">
the div element has two classes, start-box and active, whereas in
<div class="start-box">
the div element is only assigned the one class, start-box.
The combination of multiple classes on one element, or even the effect of a single class on an element given its relationship to other elements, is subject to the rules of cascading style sheets (meaning "CSS") .
I wish you well in learning more about CSS - you may find that the article "Learn to style HTML using CSS"](https://developer.mozilla.org/en-US/docs/Learn/CSS) on MDN useful in doing so.
I am learning jQuery and a few of the problems in my class have been having me do selector practice.
This is probably hella basic, but how do I know if that specific HTML or CSS element I'm selecting requires it to be $('#element') or $('.element') instead of just $('element')?
jQuery (and the DOM functions document.querySelector and document.querySelectorAll) are using CSS selectors to select elements from the DOM.
So basically you look at (an) HTML element(s) and try to find something that identifies the element(s), for instance if you want one particular button:
<button id="login">Login</button>
You can use its id. IDs are by definition unique on the page, so you'll always get that button (or nothing if the ID is different or the button doesn't exist). The "id" selector is a # in front of the actual id, so you'd use #login here.
But what if you want to select multiple items that are similar? For instance:
<li class="menu-item">Home</li>
<li class="menu-item">Shop</li>
<li class="menu-button">Logout</li>
What if you want the all the menu-item elements, but not the menu-button?
This time you can use their class attribute. The class selector is prefixed with a ., so you'd use .menu-item to select those two elements.
There are many other elements and CSS has quite a bit of syntax. Here are a few examples:
You can select by the element's tagname: button selects all <button> elements
You can select by any attribute: button[disabled] selects all buttons with a disabled attribute like <button disabled>n/a</button>
You can select based on their parent: li img selects all the images that are directly embedded in a <li> element
I highly recommend reading the MDN article for more information.
I have an unordered list, where I am using an ID to identify the current list item that was last clicked. On click of a different item, I am using js to switch the id to a different item in the list, so that styling could be applied.
It seems intuitive to me that a unique item that can only be used once (a selected li item) should be identified as an ID, and that is why I did that, but I was told it is bad practice to do so.
I wouldn't do so. This rather seems an opportunity for you to discover HTML 5's data attribute, which you can use for both CSS styling (using attribute selector) and JS use (with dataset or jQuery's .data() method).
Quick definition from MDN :
HTML5 is designed with extensibility in mind for data that should be
associated with a particular element but need not have any defined
meaning. data-* attributes allow us to store extra information on
standard, semantic HTML elements without other hacks such as
classList, non-standard attributes, extra properties on DOM, or
setUserData.
In HTML side :
<!-- You can use data without value, and just test its presence -->
<li data-selected>
...
</li>
In CSS :
li[data-selected]{
...
}
Your question actually has a couple of interesting components, let me try to answer them as good as I can :-)
"Is it an ok practice to change an ID using javascript if the element is unique?"
You could say it's a justifiable case, if the element really is unique, then there's no real harm in "moving" the ID with JavaScript.
BUT
In your description you touch on something more fundamental:
"On click of a different item, I am using js to switch the id to a different item in the list, so that styling could be applied."
If this is the case (you change the ID for styling), then I'd recommend using a class instead. People previously already gave you a good hint, something like an "is-active" class would be very useful as it's less specfic than an ID, can be used on multiple items if needed and if you use classes that determine a state (like "is-active", "has-children", "is-animating", etc.), it's really easy to re-use them in later parts of code as well and it is clear what the element is doing at the moment.
A little code for reference:
HTML
<ul>
<li>Some item</li>
<li class="is-active">Some item</li>
<li>Some item</li>
<li>Some item</li>
</ul>
CSS
.is-active {
color: #eee;
background-color: #222;
}
jQuery
// You probably want a bit more specific selector, but it's just an example.
$('li').on('click', function() {
var $element = $(this),
$elements = $('li');
if (!$element.hasClass('is-active')) {
$elements.removeClass('is-active');
$element.addClass('is-active');
}
});
Since you might need to reference the specific id of an element at some future point, changing it is probably a bad idea. In your case it would be better to just apply a class to the last item clicked.
I have those two elements in my html
<p id="fullday" hidden="true" >Full Day</p>
<input type="checkbox" id="fullday" hidden="true" name="CheckIn">
in my js file when i call the function
$('#fullday').show();
only the <p> element is shown and the checkbox is still hidden..
thnx in advance
You have 2 issues here.
IDs must be unique
Instead use classes, which can be used on multiple elements to identify a set of elements.
hidden="none" is a non standard way of hiding values that you want to show. From the usage recommendations at MDN
This attribute must not be used to hide content that could be legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#hidden
Use display:none instead, as below, or hide with CSS.
<p class="fullday" style="display:none" >Full Day</p>
<input type="checkbox" class="fullday" style="display:none" name="CheckIn">
Then the js is just
$(".fullday").show();
ID must be UNIQUE!
try to use class instead and $('.fullday') selector.
Look at what W3 schools has to say:
The id selector is used to specify a style for a single, unique element.
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
Learn the difference between IDs and Classes. Good luck!
I am sorry because this is a basic question, I am new to CSS yet I need to get something done quickly so I was hoping for an espresso answer...
In my document I have divs that I want to name using the naming structure [category].[specificID] and they should all be subject to the [category] CSS definition. E.g.
<div id="sectionTitle.experience">Experience</div>
...
<div id="sectionTitle.education">education</div>
I want the final ID to be distinct because I want to have the flexibility for separate JS handling. But the formatting of each sectionTitle should be the same, hence the same CSS class.
How can I do this?
You can use IDs and classes. For example:
<div id="sectionTitle_experience" class="sectionTitle">Experience</div>
Note that I have replaced the . with a _ to make it accessible in CSS - otherwise you'd have to resort to something like [id='sectionTitle.experience'] instead of #sectionTitle_experience.
EDIT: That being said, if you want a quick-and-dirty fix, try this CSS:
[id^='sectionTitle.'] { /* styles here */ }
Firstly your IDs must be unique to have valid HTML. Two elements cannot share the same ID, but they can share the same class name.
Also, I "think" you cannot have a . in your ID name, but I could be wrong about that.
What you want is:
<div id="experience" class="sectionTitle">Experience</div>
Create a css class .sectionTitle and have your desired styles into it. Pass this class to every div which will have your title text. So you can have same styles for header with different ids.