Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Qori Mayu
Qori Mayu
2,514 Points

CSS specific selector

Hi

I’m doing a little experimentation in my attempt to master css and I’m having a little difficulty trying to remember how to select a particular element where you use specific text contained within its <div>.

Please see my case below (there is a link to the code in codepen underneath if that’s easier) where at this stage I’d like to target both the “Cell”s that have “Cell2” included in their text.

Do you know if it can it be done? I’m I on the right track using a combinator?

Thanks in Advance

Qori

<body>
    <div class="Cell">
        <div class="Demo">Cell1</div>
    </div>
    <div class="Cell">
        <div class="Demo">Cell2</div>
    </div>
    <div class="Cell">
        <div class="Demo">Cell3</div>
    </div>

    <br>

    <div class="Cell-perc">
        <div class="Demo">Cell1</div>
    </div>
    <div class="Cell-perc">
        <div class="Demo">Cell2</div>
    </div>
    <div class="Cell-perc">
        <div class="Demo">Cell3</div>
    </div>
</body>

body {
    background: #e6e6e6;
}

.Cell {
    width: 80px;
    height: 80px;
    background: #ff7ccf;
    margin: 10px;
    padding: 20px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

.Cell-perc{
    width: 80px;
    height: 80px;
    background: #7dd1ff;
    margin: 10px;
    padding: 20px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

.Cell > Cell2 {
    color: white;
}

http://cdpn.io/AHbGv

3 Answers

Justin Cedroni
Justin Cedroni
5,526 Points
Justin Cedroni
Justin Cedroni
5,526 Points

I'm just getting started with css, but it seems to me that the problem is that you are trying to use a combinator with the actual text of the cell. Combinators (as far as I understand) will only work with classes, html tags, etc. If you're trying to target just the cells with "Cell2" in them, I think you're going to have to change or amend your class naming structure. Of course somebody with more experience might be able to provide a more elegant answer...

Robert Russell
Robert Russell
8,958 Points
Robert Russell
Robert Russell
8,958 Points

They thought about putting a content selector in for CSS3 but it didn't really make the cut: http://www.w3.org/TR/css3-selectors/#content-selectors

You could however do it with jQuery $('div:contains("Cell2")')

Qori Mayu
Qori Mayu
2,514 Points
Qori Mayu
Qori Mayu
2,514 Points

Thanks guys, appreciate the replies. I guess I thought it was possible getting confused with the attribute selectors and such like that i'd learned previously

Thanks again