Learn Basic CSS by Building a Cafe Menu - Selector Question

Is there a difference between the selectors when it depends on placing the periods before the class name?

Examples:
.address, .address p, and address

I noticed there was some questions where the answers involved putting a period before a word, or it’s usually removed.

When recalling the selector as a class name (ex: <p class=address), it’s always the dot that gets removed?

Im not sure what you are entirely asking. A dot is always used to reference a class in css. Not sure I understand when you say it gets removed

In these examples, the first refers to a the address class, the second refers to looking for any p elements that are descendants of the address class, the the third refers to nothing. In the example, the third option is not a class, id, or element. So its invalid if you try to use it that way in css

With the dot it is a class selector, without the dot it is a (element) type selector and the name must be a valid HTML element type.

<input class="input" >
/* class selector */
.input {

}
/* type selector */
input {

}

In the HTML the class name is always just the name. The browser knows it is a class name because it is inside the class attribute. In the CSS the dot is needed to identify it as a class because there is no other context.

Hello!
The . before text signifies to the system program that it is a class selector.
If it has an # prior to the text, it tells the system program it is working with an id selector.
If it is only text prior to the selector, it tells the system it is working on an element selector.
Anything additional behind the original text would be directing the system to that specific location to perform the actions.
At least, this is my understanding and how I am doing my selectors and coding.
Hope this helps you understand a little better.
Happy coding! :slight_smile:

Understood! That really helps out a lot. Thank you. :smiley:

1 Like

Thank you for taking the time to explain it! This is certainly useful information :smiley:

1 Like

Understood. Thank you so much!!

1 Like

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