Friday, April 22, 2011

CSS selectors combined behavior

Have you ever seen rules like that?
#home .row.boxes { ... }  // note that .row.boxes  2 classes are combined

Here is another example,[title^="Test"] { ... }

And when I played around with it, it is used for targeting an element that has "row" and "boxes" at the same time.

Let's using the same rule here:  #home .row.boxes { ... }

<div id="home">
    <div class="row boxes">This will pick up that css rules</div>
    <div class="boxes row">This will pick up that css rules</div>
    <div class="row">This will not pick up that css rules</div>
    <div class="boxes">This will not pick up that css rules</div>

You can think about this "combined" rules as "AND", in other words, the rule mentioned above says, only if "row" AND "boxes" are in the same element.

It is quite useful in some cases.  Think about the following case, without the combined rules, how can you only targeted the "bold" element?

<div class="boxes">
    <div class="row box">Hello World</div>
<div class="boxes">
    <div class="box">Hello World 2</div>
<div class="boxes">
    <div class="row">Hello World 3</div>


  1. Oh thank god, maybe you can help me.

    I have this code:

    < =div class= "boxes"= >

    And its making my ad spaces go:


    I want them to go

    What "class" do I have to change it to to do this? Im assuming its the class "code", but I could be wrong. It could be a whole other html code I have to put in the above mentioned code.

    God, if YOU could help me, I would be incredibly grateful. I'm not a coder. I'm a writer.

  2. This comment has been removed by the author.

  3. Hi Kristi,

    As far as I can tell, here are my 2 cents
    1) the html is invalid. ( how come there are "=" signs at both ends? )
    2) I believe you are using a block element to holds each item, if that's the case, you can do either of the followings
    --- 1) use inline-block in your css
    --- 2) using float:left in your css

    However, if you are not a coder, it's very hard to tell you what to change, you may want to have someone make changes for you.