HTML id selector tags for Styling

HTML & CSS
1

what are the html id tags that can be use identifying for styling in css? can i style every html tag? like div tags etc., some examples please thank you :slight_smile:

2

There is the <ul> tag which specifically means to be used for unordered lists.

<ul id="specificIDhere">
<li>texdt</li>
<li>second crap</li>
</ul>

ul#specificIDhere{background:red;}
1 Like
3

You can use an id anywhere within the body (or even on the html tag) as long as each id is only used once per page.

You can use a class anywhere that you can use an id and can both reuse them and attach more than one to the same tag

You can also reference the tags directly from the CSS and qualify them by their attributes.

<div id="anId">
<ul class="class1 class2 class3">
<table id="somethingelse" class="class2 class3">
<p>
<input type="radio" ...>

with CSS

.class1 {/* ... */}
.class2 {/* ... */}
.class3 {/* ... */}
div {/* ... */}
ul {/* ... */}
p {/* ... */}
input[type=radio] {/* ... */}
#anId {/* ... */}
#somethingelse {/* ... */}
2 Likes
4

can you set a little examples for the tags? html with style sheet please thank you

5

That is exactly what @felgall did in post #3. He provided several concise examples of tags with IDs and/or classes and their CSS counterparts.

3 Likes
7

okay

8

is there a specific value to put on the closing quote on each id and class? or you can just put anything on it? both section1 and section2 value doesnt mean anything is just a way to identify specific div id, right?

e.g

<div id="section1">

<div id="section2">
9

You can’t have <div id="section1 section2">. You CAN have <div class="section1 section2">.

Spot on. I could name that “macandcheese” if I wanted. I just need to update the CSS to match that. #macandcheese

1 Like
10

so <div id=""> can be only use on a 1 specific target?

11

You can use any name you like for your classes and ids. It’s usually better to pick a name that means something, so that it’s easy to work out which section your styles are referring to. For example, <div id="main-content"> and <div id="sidebar"> are probably better choices than <div id="section1"> and <div id="section2">.

1 Like
12

You can only have an element with one ID.

So this is valid

<div id="section1">
<div id="section2">

asdf

</div>
</div>

THis is not

<div id="section1 section2">
asdf
</div>

Each element you create (span div p, etc) can only be associated with one ID. IDs are unique. Classes you can throw around like cheerleaders in high school.

1 Like
13

yes that would be more efficient and understandable putting meaning to each value on classes and id’s

14

Yes. Each id can only be used once on a page - whether it’s attached to a <div>, a <span>, a <p> or whatever. A class can be used multiple times on a page, for different elements.

1 Like
15

so id’s only can be use on a specific unique element, were as class can be use on multiple elements, can you give a specific code example please on each id and class

16 
<div id="unique">
<div class="active nav biggerFont">
<p class="biggerFont">asdf</p>
</div>
</div>

The class I made will have biggerFont class (to give it bigger font presumably)…the active class to do something special with it, and nav to identify it as our navigation. The biggerFont is redundant in this case, but do you understand?

1 Like
17

yes i understand thanks

18

can i put any content? such as images links paragraphs etc

19

Of course. You should test it out.

2 Likes
22

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.