Can This Effect Be Achieved? [solved]

	Can This Effect Be Achieved? [solved]
	Discussion by Ahsaniqbal111 with 5 Replies. Last Update: December 25, 2010, 1:32 pm

Ahsaniqbal111

I have a wordpress based website (mananatomy.com) and I am looking for an effect to achieve. The format of my pages is somewhat like that;
==========================================
<h1> ( the title of the post I make through wordpress)
==========================================
Outline: (<strong class="outline">)
Introduction to "keyword"

<h2>)
<h2>
<h2>
==========================================
Now what I actually want to achieve is that the first <strong> tag in my post automatically gets the class "outline" so that I do not have to write it again and again with every page I enter. Is this possible?

Sat Dec 25, 2010 Reply New Discussion

Feelay

I assume that you are using CSS.

If that's the case, you can write it like this,

CODE

strong:first-child
{
CSS-Code goes here.
}

This will do that EVERY FIRST "strong" element inside another element (or in the body) gets those preferences.
Is that what you're looking for?

If that's not the case, I'll blame it on the time, (A)
It's almost 4AM here,

Regards
/Feelay

Sat Dec 25, 2010 Reply New Discussion

Ahsaniqbal111

QUOTE (Feelay)

I assume that you are using CSS.

If that's the case, you can write it like this,

CODE

strong:first-child
{
CSS-Code goes here.
}

Regards
/Feelay
Link: view Post: 151046

You have given me some light but this is not the exact solution. I do not want first <strong> child of every element to be of that specific design. I want first <strong> child of div.summary to be of that particular design.

Sat Dec 25, 2010 Reply New Discussion

Feelay

I made a quick research and found a reference guide on the following website:
W3.org - Child-Selectors
W3.org - First-Child

I made a quick example on my local PC, and this is the important part of the code. It works, and I think this is exactly what you want:

CODE

<head>
<style type="text/css">
div.summary > strong:first-child
{
color:red;
}
</style>
</head>
<body>
<div class="summary">La<strong>lalal</strong>La<strong>lalal</strong></div>
</body>

Now what will happen here is that the first strong element will make the text red, while the second strong element will do what it usually does, making text bold.
I hope this is what you are looking for.

Regards,
/Feelay

Sat Dec 25, 2010 Reply New Discussion

Ahsaniqbal111

QUOTE (Feelay)

CODE

<head>
[tab][/tab]<style type="text/css">
[tab][/tab][tab][/tab]div.summary > strong:first-child
[tab][/tab][tab][/tab]{
[tab][/tab][tab][/tab][tab][/tab]color:red;
[tab][/tab][tab][/tab]}
[tab][/tab]</style>
</head>
<body>
[tab][/tab]<div class="summary">La<strong>lalal</strong>La<strong>lalal</strong></div>
</body>

That was really nice and it has solved my problem

Sat Dec 25, 2010 Reply New Discussion