-3

I have used button .order{} to select the elements inside the button. However, the css codes written inside it donot work as expected.(i.e. the color of the text did not change to red).

However, When i use`.order` to select the elements, the CSS code works as expected.

Can anyone please explain why is this happening?

I have attached the screenshot along with this question.

enter image description here

Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Hemant
  • 3
  • 1
  • There is no screenshot. Try to edit the question please. – AhmedSHA256 May 05 '22 at 06:30
  • 1
    Please read [ask] and [mcve] – Sfili_81 May 05 '22 at 06:36
  • Well, what's the corresponding HTML? – deceze May 05 '22 at 06:43
  • whilst the accepted approach of providing a minimal example is good - its totally obvious from the screenshot and the description of the issue what is the problem. Not everything requires a fleshed out snippet o r stackblitz. This is purely a descendant selector issue in the css selector. – gavgrif May 05 '22 at 06:49
  • @gavgrif And what if OP has ` – deceze May 05 '22 at 06:53
  • @deceze - in that case the descendant selector would have actually worked and styled the span - the fact that the OP indicates that the descendant selector did not work indicates that it is not the structure you have suggested. and the fact that the class selector without the ancestor element selector works tells me that the class is on the button itself not a descendant element. Simple html and CSS selector knowledge allows full understanding of the issue – gavgrif May 05 '22 at 07:11
  • @gavgrif Fair enough, closed it as dupe of https://stackoverflow.com/q/1126338/476 now. – deceze May 05 '22 at 07:16

2 Answers2

2

Its the space in your selector that is causing the issue - when you use button .order {...} the space indicates that the order class is a descendant selector (ie - it relates to an element inside the button), but when you use buton.order {...} then the selector is the button with the class of order.

This can be summarised as below: -

button .order {...}; // style all elements inside the button that have the class of "order" <button> <span class="order">1</span></button>

button.order { ....} // style the button with the class of "order" <button class="order">1</button>

but you do not need the element selector as well as a the class selector - just use the class selector directly - unless you have buttons and other html elements with the same class but require different styling - then you will need to differentiate

.order { ... } // style all things with the class of"order"**

gavgrif
  • 15,194
  • 2
  • 25
  • 27
0

Apply the .order class to the button directly, you don't need to do that.

Use this: style.css

.order {
  margin-top: 50px;
  color: red;
}

index.html

<button class="order"></button>
AhmedSHA256
  • 525
  • 2
  • 20