• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CSS selector

Enthusiast ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

Hi,

 

HTML: <section id="ID" class="C">

 

How can I wite CSS?

 

CSS: section.C

 

How can I deal with id for section.C?

 

Hosun

TOPICS
Code

Views

181

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , May 24, 2024 May 24, 2024

It all depends on your objectives and the weight you wish to give to your selector (it's in French but very well done https://www.zonecss.fr/cours-css/poids-des-selecteurs-css.html)

 

Given that your tag uses an identifier, and that there will only be one in the page, chances are that a simple call to this identifier will suffice (unless you're pooling CSS style sheets and proposing a different rendering according to context and zone).

So these selectors are all possible

 

 

#ID
.C
#ID.C
section
...

Votes

Translate

Translate
Community Expert , May 24, 2024 May 24, 2024

I think you need to think about the hierarchy of what you are trying to define as you define things. If "C" is what you are calling this section and it is unique, then "C" should be your ID as opposed to your class. The id in HTML is a unique identifier of a particular element and is not reused on the page, whereas in your case, a class of "C" is a class that can be re-used on multiple elements on your page. So if "C" should be a unique value and a section "ID" is just used to name all sections

...

Votes

Translate

Translate
Community Expert , May 24, 2024 May 24, 2024

#ID = unique

.class = re-usable

 

CSS

#ID {some unique style}

.C {some reusable style}

 

Votes

Translate

Translate
Enthusiast ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

I guess: section#ID.C

 

Hosun

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

It all depends on your objectives and the weight you wish to give to your selector (it's in French but very well done https://www.zonecss.fr/cours-css/poids-des-selecteurs-css.html)

 

Given that your tag uses an identifier, and that there will only be one in the page, chances are that a simple call to this identifier will suffice (unless you're pooling CSS style sheets and proposing a different rendering according to context and zone).

So these selectors are all possible

 

 

#ID
.C
#ID.C
section#ID
section.C
section#ID.C
...

 

 

However, I'd advise you to use only lowercase letters to values your class and id attributes... so it would be preferable to use :

 

 

<section id="id" class="c">

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

I think you need to think about the hierarchy of what you are trying to define as you define things. If "C" is what you are calling this section and it is unique, then "C" should be your ID as opposed to your class. The id in HTML is a unique identifier of a particular element and is not reused on the page, whereas in your case, a class of "C" is a class that can be re-used on multiple elements on your page. So if "C" should be a unique value and a section "ID" is just used to name all sections "A-Z" then I would reverse what you have today. It could also simplify your CSS to look for just section.C instead of section#ID.C.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

LATEST

#ID = unique

.class = re-usable

 

CSS

#ID {some unique style}

.C {some reusable style}

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines