setting properties of a class with multiple names

Question

This is basic, might be wrong .

Some classes have multiple names inside, for instance in Bootstrap :

 <nav class='navbar navbar-default navbar-expand-lg sticky-top'>

I am trying to understand this subject :

1. Using a name for a class let you set properties in CSS with this name, if so, why some classes gets multiple names- like this one above ?

2. If a class has multiple names, how do you set its CSS properties, by which name ?

3. If you have a class, and another inside, and you first set properties to the top(which affect the inner) and then you drill in and set different properties to the inner, will it override the outer ?

For example:

<div class="=collapse navbar-collapse navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
               <li class="nav-item">

How would I edit the nav-item class text color? how do you drill into it in CSS?

So this will not work :

 .nav-item{
    text-align: right;
     color: aqua

}

It looks like a mess with all those names, unlike coding in C++ or other language.

Answer 1

Typically different classes handle different styles for the tag they are defined on.

1. The reason can be implied from my first sentences. They are used to specify different stylings on the object they are applied to and they are used to separate styles for reuse on different manifestations of the object

2. This depends on what you want to achieve and what you want to modify. Take a look in the developer tools of your browser. There you can inspect what each class does and what stylings they apply on the current tag. If you want to modify something you have to find out which class does what. In you case we are talking about Bootstrap and you find on their homepage what the different classes do and are used for.

3. If you have multiple classes and one does override the other class there are specific rules for that. This doesn't depend on the class order within the class= attribute but rather is controlled by the order of the selectors in your CSS stylings e.g.

    .navbar-default{ color: white; }
    .navbar{ color: red; }

The CSS above does style the color of the text red and not white even if the navbar class is in the HTML markup listed first. The latest / last defined CSS is important. There are more rules which define the priority of the stylings based on CSS selectors. I would suggest that you put some time in reading here because you need to build up some basic knowledge on how CSS works.

Answer 2

1. Using a name for a class let you set properties in CSS with this name, if so, why some classes gets multiple names- like this one above ?

This is by design by the bootstrap team. You may want the css properties of navbar but not want your navbar to expand at the large media breakpoint (navbar-expand-lg). You instead may want your navbar to expand at the medium breakpoint, so you could do class="navbar navbar-expand-md". These multiple classes allow the develop to apply different classes (and in turn different css properties) based on their needs.

2. If a class has multiple names, how do you set its CSS properties, by which name ?

You can apply your custom styles to any class name. (the provided bootstrap classes or your own custom classes)

3. If you have a class, and another inside, and you first set properties to the top(which affect the inner) and then you drill in and set different properties to the inner, will it override the outer ?

If I understand your question correctly, you are asking if the parent element has styles and the child element has conflicting styles, will the child element override the parent styles. Yes, styles on the child element will override properties that were inherited.

There are a couple of reasons your nav-item class may not be overriding bootstrap's nav-item. If bootstrap styles are loaded after your custom styles, the bootstrap class has precedence. Another reason may be the bootstrap class has a more specific selector such as .navbar-nav > .nav-item in which case it would have precedence over your less specific selector. Here is a good stackoverflow answer over css precedence.

Answer 3

1. Think about the concept of grouping classes. You can, for instance, change the color of several classes at once, matching a pattern like "navbar". Or apply event listeners to a group to tasks such as animate stuff or programming interactive JS actions.

2. Most modern browser rendering engines support displaying these properties for the set class name in arguments. Look up documentation on the web framework you're developing your web project.

3. From Mozilla Developers Network's CSS documentations:

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

Answer 4

1. Using a name for a class let you set properties in CSS with this name, if so, why some classes gets multiple names- like this one above ?

It gives more granular control over styling and allows certain classes to be used for multiple different elements. For instance, there could be a class called "red-text" that changes the font color that could be added paragraphs, divs, list items etc. Without multiple classes the CSS would need to contain several classes that are nearly identical, except with another line that sets the font color to red (e.g, "p.normal-paragraph" and "normal-paragraph-red").

2. If a class has multiple names, how do you set its CSS properties, by which name?

You can use any one of the classes to set its CSS properties, but a couple things worth noting:

1. The class you choose might be used by other elements that you don't want to modify, so look out for that.
2. The CSS rules will be applied in sequential order, so if you make a rule for one class (say "font-size:16px") but the element has another class further down the stylesheet that has a different rule for that same property ("font-size:11px") your new rule will be ignored.

3. If you have a class, and another inside, and you first set properties to the top(which affect the inner) and then you drill in and set different properties to the inner, will it override the outer?

Yes. Elements will inherit styles from their parents but if a property is changed at a more specific level (in this case the child element) it will use that style instead. Specificity is an important aspect of CSS (this is what makes them "cascading"), and the more specific selector will always trump a less specific selector.