/    Sign up×
Community /Pin to ProfileBookmark

Why Class And Not Name Or ID IN
?

Copy linkTweet thisAlerts:
Jun 25.2022

Hi,

How come the following code did not give a:

name=
id=

But gave:
class=

What is the difference between the class and the name/id ?

[code]
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>CSS Max-width</h2>

<div class=”ex1″>This div element has width: 500px;</div>
<br>

<div class=”ex2″>This div element has max-width: 500px;</div>

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>

</body>
</html>

[/code]

https://www.w3schools.com/css/tryit.asp?filename=trycss_max-width

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJun 25.2022 — @novice2022#1644902

"Why not name=" was already answered.

ID can be assigned to a single element only.

Class can be assigned to multiple elements and in CSS multiple elements can be referenced by the class in the selector.

In the example on w3schools IDs or classes would have done the same job.
Copy linkTweet thisAlerts:
@novice2022authorJun 28.2022 — @Sempervivum#1644907

Thanks.

Mmm.

They did it like this:
<i>
</i>&lt;div class="ex1"&gt;This div element has width: 500px;&lt;/div&gt;
&lt;br&gt;

&lt;div class="ex2"&gt;This div element has max-width: 500px;&lt;/div&gt;


I thought of doing it like this at first before your previous reply:
<i>
</i>&lt;div id="ex1"&gt;blah blah;&lt;/div&gt;
&lt;br&gt;

&lt;div id="ex2"&gt;And, blah;&lt;/div&gt;


Anymore input from your end ?
Copy linkTweet thisAlerts:
@SempervivumJun 28.2022 — When using the second HTML you will be able to style the elements the same way as in the snippet from w3schools. You would just have to replace the selectors. The differences between ID and classes will get relevant only when your layout gets more complex and you intend to style several elements the same way. Then using classes would be more applicable.
Copy linkTweet thisAlerts:
@novice2022authorJun 28.2022 — @Sempervivum#1645031

Things will get clear when I see differences in my browser. Will be remembrable then. About differences.
×

Success!

Help @novice2022 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...