Overriding CSS attributes

Question

I'm trying to make a very basic HTML/CSS/JS widget, but I'm having some problems with the CSS layer. It seems that I can't write selectors that work, and it's becoming very aggravating. In particular, I'm trying to override the font-size setting inherited from the body css selector for the widget. My HTML (actually, it's Hamlet) is:

<div class="container">
  <div id="flashcard-container">
    <div class="span6 offset3 well flashcard">
      <div class="front">
        <p class="flashcard">This is the front of the card.

and my CSS file says:

.flashcard p {
  font-size: 24px;
}

div .back {
  display: none;
}

Actually, I have a problem with both selectors. In particular, the first one just does not work to match the xml structure. The second one seems sub-optimal. Why should I need to specify that I'm talking about a div at all? I just want to quantify over backs, whatever tag they are.

I realize this is extremely basic, but I think that between this and some Chrome bugs with 3d transitions, I got myself extremely confused. It has been many years since I've dealt with the front-end. :(

`p.flashcard` and `div.back` most likely. The space is a special selector meaning "all descendants" By changing to `p.flashcard` you say `the paragraph with a class of flashcard` — Eric Hotinger, Sep 18 '13 at 20:14
Try adding an important where you want to override styles like this font-size: 24px !important; — zazvorniki, Sep 18 '13 at 20:14
@zazvorniki I wouldn't say so. http://stackoverflow.com/a/3706876/2654498 — Nick, Sep 18 '13 at 20:27
Okay, apparently my problem wasn't syntax (though I was getting into weird territory since nothing seemed to work), but some kind of problem with the framework I'm using. It wasn't loading the style sheet so none of my changes got reflected. A style tag worked. Thanks everybody. — nomen, Sep 18 '13 at 20:47

score 1 · Answer 1 · answered Sep 18 '13 at 20:19

Try this:

    p.flashcard { ... }
    div.back { ... }

Actually I can't see a div with back class in your code. You may as well use just .flashcard and .back. Specifying div or p just narrow the choice. If you specify .flashcard it will be applied both to, say, or .

But if you write

    .flashcard p { ... }

It means that you chose all descendants of .flashcard, like:

    <div class="flashcard">
          <p>...</p>
    </div>

score 1 · Accepted Answer · answered Sep 18 '13 at 20:19

If you wish to target a node with a class attached, the syntax is

elementname.classname {...}

(although OOCSS fanatics will suggest just using .classname and making your CSS structurally agnostic).

I am not sure what you mean by 'quantifying over backs', but if you simply want to target an element with a 'back' class, you can target it as so:

.back {...}

Though it might be best to contain the styles as 'back' is a rather generic class name:

.flashcard .back {...}

I mean quantifying over all tags that "are" a back, as in your OOCSS fan/second example. — nomen, Sep 18 '13 at 20:39

Overriding CSS attributes

2 Answers2