How do I match nested tag?

Question

I need to match pre when it is under long class, like in here:

<div class="long highlight-text">
  <div class="highlight">
    <pre>
      some code
  </pre>
  </div>
</div>

I tried: long.highlight.pre -- but doesn't seem to be working.

it should be more like: .long.highlight-text .highlight pre {} — G-Cyrillus, Jun 10 '13 at 11:03
You should specify the exact conditions for matching. The correct answer heavily depends on that. For example, should *any* `pre` element that is inside an element in class `long` be a match? If not, what other conditions do you want to impose? — Jukka K. Korpela, Jun 10 '13 at 11:17

Denys Séguret · Accepted Answer · 2013-06-10T11:09:58.333

3

As from your test you seem to also want to include .highlight in the selector, I'd suggest this one :

.long .highlight pre

or if you just want to "match pre when it is under long class" :

.long pre

A space in a b means b is a descendant of a.

edited Jun 10 '13 at 11:09

answered Jun 10 '13 at 11:02

Denys Séguret

gkalpak · Answer 2 · 2013-06-10T11:15:31.197

2

You need the ␣ combinator selector, which refers to all matching descendants (not necessarily direct childs):

.long pre

See, also, this page describing CSS selectors
or the official CSS Selectors Reference.

edited Jun 10 '13 at 11:15

answered Jun 10 '13 at 11:03

gkalpak

Be careful when you link to this site which is full of errors. You shouldn't let think it's a "reference". – Denys Séguret Jun 10 '13 at 11:08
I am not fond of this site, whose name should not be spoken (or writen) and I always try to link to MDN, but I find this particular page a very good (simple and clear) reference for CSS selectors. (This does not mean the rest of the site is a reference or anything.) – gkalpak Jun 10 '13 at 11:10
1

@dystroy: There you go, I added the official reference for everyone to be happy (and hopefully safer) :) – gkalpak Jun 10 '13 at 11:16

score 1 · Answer 3 · answered Jun 10 '13 at 11:05

1

You should use: .long pre. And read http://www.w3schools.com/css3/default.asp for detail.

answered Jun 10 '13 at 11:05

selfboot

Wschools should not be consulted for details, or for anything else, see http://w3fools.com – Jukka K. Korpela Jun 10 '13 at 11:19
@Jukka K. Korpela Thanks for your comment. W3schools is really a troublesome resource. – selfboot Jun 11 '13 at 11:48

score 0 · Answer 4 · answered Jun 10 '13 at 11:03

0

Try this selector for css

.long .highlight pre

answered Jun 10 '13 at 11:03

Sachin

4 Answers4