CODEWITHSUNDEEP
htmlcss
ernestson
ernestson

Reputation: 81

style specific parts of an h3 element

my current html:

<section class="menu-group">
                    <h2 class="menu-group-name">Appetizers</h2>
                        <div class="menu-item-line">
                            <h3 class="menu-item">Battered Cauliflower(GF,SF), Tofu (GF), or Kalebone (SF)</h3>
                            <h3 class="menu-item-price">$3.90/ea</h3>
                        </div>
                        <div class="menu-item-line">
                            <h3 class="menu-item">Herb Potatoes (GF)</h3>
                            <h3 class="menu-item-price">$3.50</h3>
                        </div>
                        <p class="item-desc">A tasty order of our baked seasoned potatoes</p>

                        <div class="menu-item-line">
                            <h3 class="menu-item">Eggless Bowl (GF)</h3>
                            <h3 class="menu-item-price">$3.00</h3>
                        </div>
                            <p class="item-desc">Our most popular eggless salad served chilled with whole wheat crackers</p>    
                </section>

and the relevant css:

.menu-item, .menu-item-price {
    font-family: 'Francois One', sans-serif;
    font-size: 18px;
    margin: .5em 0;
    color: black;
    display: inline-block;      
}

.menu-item {
    max-width: 300px;
}

.menu-item-price  {
    float: right;
    /*margin: 0 0 0 5px;*/
}

.item-desc {
    font-family: 'Open Sans', sans-serif;       
    color: black;
    font-size: 18px;
    /*float: left;*/
    max-width: 300px;
    /*font-style: italic;*/
    margin: 0;
}

Is there a way to grab all "(GF,SF)" (and all other permutations of "___free") using css and make the text slightly smaller? I could not find a way except altering the markup. Thanks

Upvotes: 0

Views: 446

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

You might try wrapping each abbreviation in a abbr tag and then use the title attribute to provide a key to the meaning of the abbreviation.

Reference: http://www.w3.org/TR/html-markup/abbr.html#abbr

You can then define a CSS rule for abbr to style it as you want.

As for the opening and closing parentheses, maybe use first-child and last child selectors with pseudo elements.

<abbr title="Good Food">GF</abbr>

Upvotes: 1

DarkHorse
DarkHorse

Reputation: 2770

Yes you can do without altering markup, but you will have to use javascript or jquery for that.. but if you are only sticking to css to accomplish it, you will have to alter the markup.. need to catch it in <span> and use h3 > span and give the new font size

Upvotes: 1

Related Questions