Geek Answers Handbook

CSS issue: first type: first letter

I set my page to create a large letter with an inscription in the first paragraph of the content. This works as expected, but when I have another div with the specified class in front of my affected elements, it makes the capsule disappear.

See examples ...
Correct display: http://jsfiddle.net/KPqgQ/
Invalid display: http://jsfiddle.net/d73u9/

I have the following code on my page:

<section id="review"> <div class="content_right"></div> <div class="content_left"> <p>text</p> <p>text</p> </div> <div class="content_left"> <p>text</p> <p>text</p> </div> </section>

With the following CSS:

  #review .content_left:first-of-type p:first-of-type{ padding-top:10px; } #review .content_left:first-of-type p:first-of-type:first-letter{ float: left; line-height:90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia",_serif; font-weight: bold; font-size: 60px; color:black; }

to create a large first letter with a lockable lid.

This code works when I delete the div "content_right", but CSS does not work with it there. I thought I had the correct order regarding the statements, but I have to miss something.

Does anyone know why this is not working as intended?

+4
source share
2 answers

This works like this: the first-of-type selector actually selects the first of a specific element type (section, div, span, etc.) and does not actually select the first type of type.

Alternatives

Correction '~'

The tilde ' ~ "workaround is mentioned here .

 /* Targets all paragraphs */ p { display: block; clear: both; } /* Targets all paragraphs within divs in #review */ #review div p { padding-top:10px; } /* Targets the first letter within each paragraph */ #review div p:first-letter{ float: left; line-height:90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia",_serif; font-weight: bold; font-size: 60px; color:black; } /* Removes the padding from all except the first paragraphs */ #review > div ~ div > p ~ p, #review > .content_left ~ .content_left p:first-of-type { padding-top: 0px; } /* Removes the first letter stylings of the non-first paragraphs within .content_left classes */ #review > .content_left ~ .content_left p:first-of-type:first-letter, #review > div ~ div > p ~ p:first-letter { float: none; line-height:90%; padding-right: 0px; padding-bottom: 0px; font-family: "Georgia",_serif; font-weight: normal; font-size: 12px; }

Example using the ~ method

(Thanks to BoltClock for helping me along with this, and this is his method after all).

Div mode switching

Moving .content_right behind .content_right sections as they are floating and you can still support the same layout.

code:

 <section id="review"> <div class="content_left"> <p>text</p> <p>text</p> </div> <div class="content_left"> <p>text</p> <p>text</p> </div> <div class="content_right"></div> </section>​

Example switching order :

Using the nth-of-type selector

Use the :nth-of-type selector to select the correct div.

code:

 #review .content_left:nth-of-type(2) :first-child { padding-top:10px; } #review .content_left:nth-of-type(2) :first-child:first-letter { float: left; line-height:90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia",_serif; font-weight: bold; font-size: 60px; color:black; }

Example usage: nth-of-type

+5
source

Here is my approach to a workaround ~ . I thought I could succeed, since Rion Williams was kind enough to link my description of the workaround to his answer (which also explains pretty well why your code doesn't work, work as expected):

 /* The first p in all .content-left elements */ #review .content_left p:first-of-type { padding-top: 10px; } /* * Undo the above style for the first p in subsequent .content-left elements. */ #review .content_left ~ .content_left p:first-of-type { padding-top: 0px; } /* The first letter in the first p in all .content-left elements */ #review .content_left p:first-of-type:first-letter { float: left; line-height: 90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia", _serif; font-weight: bold; font-size: 60px; color: black; } /* * Undo the above styles for the first letter in the first p * in subsequent .content-left elements. * * I'm just using the initial values for every property here; you'll want to * adjust their values as necessary. */ #review .content_left ~ .content_left p:first-of-type:first-letter { float: none; line-height: normal; padding-right: 0px; padding-bottom: 0px; font-family: inherit; font-weight: normal; font-size: medium; color: inherit; }

jsFiddle preview

Depending on your layout, you may need to repeat this for some other classes as well. Unfortunately, since CSS has not yet provided a selector that matches the first element of a particular class, for now you have to deal with overriding rules.

+2
source

More articles:


All Articles