In creating a dictionary entry that has two senses I would like the first entry to be on the same line as the headword/lexeme and part-of-speech [not showing correctly] and the second entry to be on a new line[showing correctly] .


I've tried
.Sense_Number:first-of-type { display: inline; color: red ; font-weight: bold ; }
and
span[class=Sense_Number]:first-of-type { display: inline; color: red ; font-weight: bold ; }
to select it to no avail.

The CSS:
.Sense_Number::after { content: ") " } /* non-breaking space following )*/
.Sense_Number::before { content: " " }
span[class=Sense_Number]:first-of-type { display: inline; color: red ; font-weight: bold ; }
.Sense_Number { display: run-in; color: blue ; font-weight: bold ;}

<p>
<span class="Lemma">ajar</span>
<span class="Part_Of_Speech first-of-type">vn</span>
<span class="Sense_Number">1</span>
<span class="Definition_English">teach, train in knowledge</span>
<span class="Definition_National">mengajar, atau mendidik (pengetahuan)</span>
<span class="Sense_Number">2</span>
<span class="Definition_English">punish or correct inappropriate behaviour; scold, discipline</span>
<span class="Gloss_National" >didik, hukum, ganjar, hajar</span>
</p>

Note: I had similar problem with Part_Of_Speech but solved it with adding attribute of first-of-type. I'm just trying to figure out why "first-of-type" selector doesn't work for me. Example showing attribute working.

span[class~=first-of-type]  { display: inline; font-style: italic; font-size: 90%; }
.Part_Of_Speech {display: run-in; font-style: italic; font-size: 90%; }

Jim Albright
Wycliffe Bible Translators

1. first-of-type.png‎ 8.7 kB ‎
   sample of what I have now
2. first-of-type2.png‎ 5.4 kB

Is the issue here that :first-of-type only applies to the type or element name part of the selector? eg. span:first-of-type will match the first span, and span.foo:first-of-type will match the first span IF it has a class of foo, it will NOT match the first span that has a class of foo.

The problem is in selecting.

p > span.Sense_Number:first-of-type  { display: inline; color: red ; font-weight: bold ; }

doesn't work either.

I didn't understand

Jim Albright
Wycliffe Bible Translators

What I mean is that the selector "span.Sense_Number:first-of-type" will match an element that satisfies three properties:

1. It is a <span> element.
2. It has a class of Sense_Number.
3. It is the first <span> child element within its parent element.

Note that property 2 and 3 are independent of each other. Does this match your interpretation?

So how do I select the first span with class "Sense_Number"?

<p>
<span class="Lemma">ajar</span>
<span class="Part_Of_Speech first-of-type">vn</span>
<span class="Sense_Number">1</span>
<span class="Definition_English">teach, train in knowledge</span>
<span class="Definition_National">mengajar, atau mendidik (pengetahuan)</span>
<span class="Sense_Number">2</span>
<span class="Definition_English">punish or correct inappropriate behaviour; scold, discipline</span>
<span class="Gloss_National" >didik, hukum, ganjar, hajar</span>
</p>

Jim Albright
Wycliffe Bible Translators

I think you would need to use two rules, one to apply to all of them, one to apply to all but the first:

span.Sense_Number { ... }
span.Sense_Number ~ span.Sense_Number { ... }

Then any properties you don't want to apply to non-first spans can be canceled by the second rule. Rather indirect, I must admit.

Works beautifully!
One more success!

.Sense_Number::after { content: " • " }  /* non-breaking space following )*/
.Sense_Number::before { content: " " }
.Sense_Number ~ .Sense_Number  { display: run-in; }
.Sense_Number  { display: inline; font-weight: bold ;}

Jim Albright
Wycliffe Bible Translators

1. first-of-type3.png‎ 15.3 kB