CODEWITHSUNDEEP
htmlcss
randy
randy

Reputation: 1877

style only one element within a div

currently i have 

<div class="rightBoxesTop">
   <h3>My Pages</h3>
   <h3 style="line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;">
         show in-active <input id="show-in" type="checkbox"></h3>
</div>

I would like to move the inline style to the css. Is this only way to the second H3 an id or is there a way to reference the class rightBoxesTop and use some thing like second something? Also if you could tell me what this kind of styling is so i could search for keywords on how to use it correctly

Thanks

Upvotes: 1

Views: 2988

Answers (4)

Mark
Mark

Reputation: 6864

if you are able to remove the inline styles, then you can also add a class for it.

This gives you the option to style it easily by its class in the CSS.

UPDATE: Because you must remove the inline styles, you can not override them in your CSS.

Upvotes: 1

aleation
aleation

Reputation: 4834

You can use .rightBoxesTop h3+h3{} as people suggested, but be careful, if you add another h3 the last 2 h3's will have that styling, or if you create another div inside .rightBoxesTop that has more than h3's they will get the styling as well, so a precise way would be:

.rightBoxesTop>h3:first-child+h3{
//your css here
}

Which would mean "The first children's( ">" means direct child, so if there are more nested levels they won't count) next h3, will get the css"

Upvotes: 0

keaukraine
keaukraine

Reputation: 5364

You can try this to style 2nd, 3rd and other following h3 tags:

.rightBoxesTop h3 + h3
{
    line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}

Also you can use CSS3 selector to style only the second h3:

.rightBoxesTop h3:nth-child(2)
{
    line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116140

You can use the selector div.rightBoxesTop h3 + h3. It will style only h3 elements that are preceded by another h3 element. This does mean, that if you got more of them, they will all be styled, except the first one.

But in this case, I would consider adding a class (rather than an id) to the second h3.

Upvotes: 0

Related Questions