CODEWITHSUNDEEP
asp.nethtmlcss
user793468
user793468

Reputation: 4976

Identifying html elements in CSS for styling and positioning

I know we can provide styling and positioning in CSS for text box, text area, buttons etc. using "Class" , "Id" etc. attributes to identifying an element.

My question is: How do we decide when to use a particular attribute? Is there any advantage of using one over other (class vs Id vs other)? Why do we have multiple ways of identifying elements? Why not have one standard way to identifying such as, lets say "Id"?

Thanks in advance

Upvotes: 1

Views: 781

Answers (4)

jacktheripper
jacktheripper

Reputation: 14239

Think of an element's id like its passport number - it is UNIQUE to the one element, and can be used to apply styling to it only.

  • Each element can have only one ID (e.g. <div id="id"></div>)
  • Each page can have only one element with that ID

Think of an element's class like its nationality - it may be SHARED with lots of other elements. Therefore it is NOT UNIQUE.

  • You can use the same class on multiple elements. (e.g. <div class="class"></div> <div class="class"></div>)
  • You can use multiple classes on the same element. (e.g. <div class="classone classtwo"></div>)

When doing large projects, you may want one standard content wrapper, with different things inside it each time. In this case, the wrapper would be identified by 'class' and the things inside it by 'id'.

When applying multiple instances of CSS, the order of precedence is as follows:

  • Element -> applying generic CSS, for example to all 'divs'
  • Class -> applying generic CSS, to all elements of that class
  • Id -> applying specific CSS, to one element
  • Inline styling -> applying specific CSS, using the style="" tag within an element's tags

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

The reason why we need various selectors (and not just one, using ID like you suggest) is that they are useful in different scenarios.

  1. Element-selector (input, div, span). Useful when we want to apply some sort of styling for all elements of a certain type, indepently of its classes or id.

  2. Id-selector. Useful when you want to apply styling to a single specific element.

  3. Class-selector. Useful when you want to apply styling to multiple elements, indepently of what type of element they are (div, span, input). With class you can also combine styling of various classes by adding several classes to the same element.

If you were to use only the ID-selector, then you would violate DRY, since you would have to repeat a lot of CSS. Let's say you have five input-elements, that all should have the same styling applied to them. You would then have to explicitly write the ID-selector for every element:

#input1, #input2, #input3
{
/* Some styling */
}

If you later on need to add another input, you would have to modify your CSS and add a new selector for that input, so that the styling is applied to that element as well. In this case it would be better to either use a class that can be applied to all inputs. Or use the element selector and just apply the styling to all inputs.

/* Either of these would probably be more suitable */
.inputs {
  /* Use a class to style the inputs */
}
input {
  /* Apply styling to all elements of type input */
}

Upvotes: 1

StriplingWarrior
StriplingWarrior

Reputation: 156624

You can't use ID everywhere because only one element is allowed to have a given ID, so if you want to apply the same style to five different elements, you'd have to create five different rules, which is pointless.

It's usually best to use a baseline definition for how you want certain element types to appear generally (links, lists, tables, etc.). Then if you have specific places where you want those elements to have different styles, apply a class to an element to identify that place ("navigation-bar", e.g.), and use custom styles to modify the behavior of elements within that area:

li {/* How you generally want list items to appear */}
.navigation-bar li {/* How you want list items to appear in the nav bar */}

Due to the way the styles "cascade", properties set by the second rule will override the properties set by the first because the second selector is more specific.

As far as why there are multiple ways available to select an element, it's because they're pretty much all useful at one point or another. CSS helps reduce maintenance costs because you don't have to repeat the same styling information in a bunch of different places. It can only do this if you can come up with a rule that makes it possible to match the elements you want in a variety of different situations.

Upvotes: 1

jonathanbell
jonathanbell

Reputation: 2637

ID is used when we want a more specific selector than a class. A class can be applied to many elements, an ID only to one (a unique one at that). ID's are most specific and will (depending on your selector) gain precedence over a class. I would recommend reading up on CSS precedence: https://www.google.ca/?q=css%20precedence

Upvotes: 2

Related Questions