mozilla

Compare Revisions

::first-letter (:first-letter)

Change Revisions

Revision 35620:

Revision 35620 by teoli on

Revision 35621:

Revision 35621 by teoli on

Title:
::first-letter (:first-letter)
::first-letter (:first-letter)
Slug:
CSS/::first-letter
CSS/::first-letter
Tags:
css, "CSS Reference", Selectors
css, "CSS Reference", Selectors
Content:

Revision 35620
Revision 35621
n20      Similarly in some languages have digraphs that are always cn20      Similarly some languages have digraphs that are always capi
>apitalized together, like the <code>IJ</code> in Dutch. In these >talized together, like the <code>IJ</code> in Dutch. In these rar
>rare case, both letters of the digraph should be matched by the <>e case, both letters of the digraph should be matched by the <cod
>code>::first-letter</code> pseudo-element. (This is poorly suppor>e>::first-letter</code> pseudo-element. (This is poorly supported
>ted by browsers, so watch the browser compatibility table)> by browsers, so watch the browser compatibility table)
n67    <ul>n
68      <li>
69        <a class="external" href="http://www.w3.org/TR/CSS21/sele
>ctor.html#first-letter" title="http://www.w3.org/TR/CSS21/selecto 
>r.html#first-letter">CSS 2.1 Selectors #first-letter</a> 
70      </li>
71      <li>
72        <a class="external" href="http://www.w3.org/TR/css3-selec
>tors/#first-letter" target="_blank" title="http://www.w3.org/TR/c 
>ss3-selectors/#first-letter">CSS 3 Selectors #first-letter</a> Wo 
>rking draft 
73      </li>
74    </ul>
75    <h2>
76      Browser compatibility
77    </h2>
78    <p>
79      CSS 3 introduced the <code>::first-letter</code> notation i
>n order to establish a discrimination between pseudo-classes and  
>pseudo-elements. Don't use the double colon notation yet for comp 
>atibility with Internet Explorer. 
80    </p>
nn68      <thead>
69        <tr style="background-color: rgb(255, 204, 255);">
70          <th scope="col">
71            Specification
72          </th>
73          <th scope="col">
74            Status
75          </th>
76          <th scope="col">
77            Comment
78          </th>
79        </tr>
80      </thead>
n84          <th>n83          <td>
85            Browser84            <a class="external" href="http://www.w3.org/TR/css3-s
 >electors/#first-letter" title="http://www.w3.org/TR/css3-selector
 >s/#first-letter">CSS Selectors Level 3</a>
86          </th>85          </td>
87          <th>86          <td>
88            Lowest Version87            {{ Spec2('CSS3 Selectors') }}
89          </th>88          </td>
90          <th>89          <td>
91            Support of90            Defined edge-case behavior like in list items, or wit
 >h language specific behavior (like the Dutch digraph <code>IJ</co
 >de>)
92          </th>91          </td>
n96            Internet Explorern95            <a class="external" href="http://www.w3.org/TR/CSS21/
 >selector.html#first-letter" title="http://www.w3.org/TR/CSS21/sel
 >ector.html#first-letter">CSS 2.1</a>
97          </td>
98          <td>96          </td>
99            5.5
100          </td>97          <td>
98            {{ Spec2('CSS2.1') }}
101          <td>99          </td>
102            <code>:first-letter</code>
103          </td>100          <td>
104        </tr>101            The initial CSS Level 2 used the one-colon syntax.
105        <tr style="border-top: 2px solid silver;">
106          <td rowspan="2">
107            Firefox (Gecko)
108          </td>
109          <td>
110            1.0 (1.0)
111          </td>
112          <td>
113            <code>:first-letter</code>
114          </td>
115        </tr>
116        <tr>
117          <td>
118            1.0 (1.5)
119          </td>
120          <td>
121            <code>:first-letter | ::first-letter</code>
122          </td>
123        </tr>
124        <tr style="border-top: 2px solid silver;">
125          <td rowspan="2">
126            Opera
127          </td>
128          <td>
129            3.5
130          </td>
131          <td>
132            <code>:first-letter</code>
133          </td>
134        </tr>
135        <tr>
136          <td>
137            7.0
138          </td>
139          <td>
140            <code>:first-letter | ::first-letter</code>
141          </td>
142        </tr>
143        <tr style="border-top: 2px solid silver;">
144          <td>
145            Safari (WebKit)
146          </td>
147          <td>
148            1.0
149          </td>
150          <td>
151            <code>:first-letter | ::first-letter</code>
tt106    <h2>
107      Browser compatibility
108    </h2>
109    <p>
110      {{ CompatibilityTable() }}
111    </p>
112    <div id="compat-desktop">
113      <table class="compat-table">
114        <tbody>
115          <tr>
116            <th>
117              Feature
118            </th>
119            <th>
120              Chrome
121            </th>
122            <th>
123              Firefox (Gecko)
124            </th>
125            <th>
126              Internet Explorer
127            </th>
128            <th>
129              Opera
130            </th>
131            <th>
132              Safari (WebKit)
133            </th>
134          </tr>
135          <tr>
136            <td>
137              Basic support
138            </td>
139            <td>
140              1.0
141            </td>
142            <td>
143              {{ CompatGeckoDesktop("1") }}
144            </td>
145            <td>
146              9.0 <a class="external" href="http://msdn.microsoft
 >.com/en-us/library/ie/ms530753%28v=vs.85%29.aspx" title="http://m
 >sdn.microsoft.com/en-us/library/ie/ms530753%28v=vs.85%29.aspx"></
 >a>
147            </td>
148            <td>
149              7.0
150            </td>
151            <td>
152              1.0 (85)
153            </td>
154          </tr>
155          <tr>
156            <td>
157              Old one-colon syntax (<code>:first-line</code>)
158            </td>
159            <td>
160              1.0
161            </td>
162            <td>
163              {{ CompatGeckoDesktop("1") }}
164            </td>
165            <td>
166              5.5
167            </td>
168            <td>
169              3.5
170            </td>
171            <td>
172              1.0 (85)
173            </td>
174          </tr>
175          <tr>
176            <td>
177              Support for the Dutch digraph <code>IJ</code>
178            </td>
179            <td>
180              {{ CompatNo() }}
181            </td>
182            <td>
183              {{ CompatNo() }} <a class=" link-https" href="https
 >://bugzilla.mozilla.org/show_bug.cgi?id=92176" title="https://bug
 >zilla.mozilla.org/show_bug.cgi?id=92176"></a>
184            </td>
185            <td>
186              {{ CompatNo() }}
187            </td>
188            <td>
189              {{ CompatNo() }}
190            </td>
191            <td>
192              {{ CompatNo() }}
193            </td>
194          </tr>
195        </tbody>
196      </table>
197    </div>
198    <div id="compat-mobile">
199      <table class="compat-table">
200        <tbody>
201          <tr>
202            <th>
203              Feature
204            </th>
205            <th>
206              Android
207            </th>
208            <th>
209              Firefox Mobile (Gecko)
210            </th>
211            <th>
212              IE&nbsp;Phone
213            </th>
214            <th>
215              Opera Mobile
216            </th>
217            <th>
218              Safari Mobile
219            </th>
220          </tr>
221          <tr>
222            <td>
223              Basic support
224            </td>
225            <td>
226              {{ CompatUnknown() }}
227            </td>
228            <td>
229              {{ CompatGeckoMobile("1") }}
230            </td>
231            <td>
232              {{ CompatNo() }}
233            </td>
234            <td>
235              {{ CompatUnknown() }}
236            </td>
237            <td>
238              {{ CompatUnknown() }}
239            </td>
240          </tr>
241          <tr>
242            <td>
243              Old one-colon syntax (<code>:first-line</code>)
244            </td>
245            <td>
246              {{ CompatUnknown() }}
247            </td>
248            <td>
249              {{ CompatGeckoMobile("1") }}
250            </td>
251            <td>
252              {{ CompatUnknown() }}
253            </td>
254            <td>
255              {{ CompatUnknown() }}
256            </td>
257            <td>
258              {{CompatUnknown()}
259            </td>
260          </tr>
261          <tr>
262            <td>
263              Support for the Dutch digraph <code>IJ</code>
264            </td>
265            <td>
266              {{ CompatUnknown() }}
267            </td>
268            <td>
269              {{ CompatNo() }} <a class=" link-https" href="https
 >://bugzilla.mozilla.org/show_bug.cgi?id=92176" title="https://bug
 >zilla.mozilla.org/show_bug.cgi?id=92176"></a>
270            </td>
271            <td>
272              {{ CompatUnknown() }}
273            </td>
274            <td>
275              {{ CompatUnknown() }}
276            </td>
277            <td>
278              {{ CompatUnknown() }}
279            </td>
280          </tr>
281        </tbody>
282      </table>
283    </div>

Back to History