Home/ Questions/Q 6994293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T19:52:26+00:00

I have an html file that uses the span keyword in two different ways.

  • 0

I have an html file that uses the span keyword in two different ways.

The first being in the second definition button.groovyButton span here:

button.groovyButton {
    border: 0;
    padding: 0;
    height: 45px;
    background:  url('../images/leftside.png') no-repeat;
}

button.groovyButton span {
    font-size: 22px;
    font-family: "san-serif";
    font-weight:bold; 
    color: #FF9900;
    line-height: 45px;
    background: url('../images/mainbak.png') no-repeat right;
    position: relative;
    left: 5px;
    display: block;
    white-space: nowrap;
    padding-right: 50px;
}

and the second, where the button.groovyButton style is used in the html:

...
<body>
<div style="text-align: center;">
  <button value="Submit" type="submit" class="groovyButton">
  <span>Please wait<img src="/images/blah.gif" width="24" height="39" /></span>
  </button>
</div>

I see how the <span></span> is used to group elements together, but what about the button.groovyButton span?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Basically it’s saying that all instances of that are used inside the class button.groovyButton will get the same styling unless another class is set on the span.

    Examples:

    <body>
  <div style="text-align: center;">
    <button value="Submit" type="submit" class="groovyButton">
      <span>Span 1</span>
      <span>Span 2</span>
    </button>
    <span>Span 3</span>
</div>

    So in that example Spans 1 and 2 will get the styling 

    button.groovyButton span {
      font-size: 22px;
      font-family: "san-serif";
      font-weight:bold; 
      color: #FF9900;
      line-height: 45px;
      background: url('../images/mainbak.png') no-repeat right;
      position: relative;
      left: 5px;
      display: block;
      white-space: nowrap;
      padding-right: 50px;
    }

    but span 3 will not get that styling.

    • 0