Geek asks and answers

Is it possible to select the very first element in a container that is otherwise pure text without using classes or identifiers in pure CSS?

This is a purely hypothetical situation. Answering a question yesterday, I ran into a problem that I had not encountered before. The question itself was rather erroneous in that you simply would not have done what he was trying to achieve, but this problem may appear in other situations. I could not give a working answer that is not related to changing the markup, and I would like to know if this is possible without changing the markup.

Take this example:

<p><strong>Lorem</strong> ipsum dolor <strong>sit</strong> amet...</p>

To create the first element strong, you simply use p > strong:first-childor something similar. It works great and works well, but what if the first one strongwas optional, and it was only the first strongone that would require styling?

<p>Lorem ipsum dolor <strong>sit</strong> amet...</p>

Is it possible to guarantee that only the very first tag will be used here strongwithout the use of classes, identifiers or anything that could distinguish two tags strongthrough markup?

Here's the JSFiddle of the above .

: , , . , p:first-child . strong - strong.

: JSFiddle, , .

+3
7

, .

, CSS , . , CSS, <p>blah <b>blah</b> blah <b>blah</b> blah</p> <p><b></b><b></b></p>.

, , , , node, .

+2

, , :

p:first-child > strong:first-child
+1

* , , :

* > strong:first-child { color:#f30; }

:

 * > p > strong:first-child { color:#f30; }
+1

EDIT - , . CSS-.

CSS. CSS ( ):

p > strong { color:blue; }
p > strong:first-child { color:red; }
p > strong:nth-last-child(-n+1) { color:blue; }

:

nth-last-child example

:nth-last-child, ( IE9 +). :

& hellip; , + b-1 siblings , n

, , strong .

+1

, - , , . <span></span> <strong> css... ?

Edit Or you can define an empty space inside your div <strong></strong>to make this first element.

+1
source

I think this is what you are looking for ...

p strong:first-child { ... }
-1
source

Look at this, this may solve your problem: http://jsfiddle.net/RNpsG/1/

body > p:first-child > strong:first-child { color:#f30; }
-1
source

More articles:


All Articles