mozilla

Compare Revisions

::first-line (:first-line)

Change Revisions

Revision 38642:

Revision 38642 by brianloveswords on

Revision 38643:

Revision 38643 by teoli on

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

Revision 38642
Revision 38643
nn4 
5    <style type="text/css">
6<![CDATA[.example p::first-line {text-transform:uppercase}
7    .example2 p::first-line{margin-left:20px}
8                                
9        ]]>
10    </style>
n45    <pre class="brush: css">n
46/* change the letters of the first line of every paragraph to upp
>ercase */ 
47 
48p::first-line { text-transform: uppercase }
49</pre>
t52    </p>&lt;style type="text/css"&gt;<!--[CDATA[p::first-line {tet
>xt-transform:uppercase} 
53                                
54        ]]-->&lt;/style&gt;
55    <p>54    </p>
56      Lorem ipsum dolor sit amet, consectetur adipisicing elit, s55    <table class="standard-table">
>ed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
> Ut enim ad minim veniam, quis nostrud exercitation ullamco labor 
>is nisi ut aliquip ex ea commodo consequat. 
57    </p>
58    <p>
59      Duis aute irure dolor in reprehenderit in voluptate velit e
>sse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaec 
>at cupidatat non proident, sunt in culpa qui officia deserunt mol 
>lit anim id est laborum. 
60    </p>
61    <table border="1" cellpadding="1" cellspacing="1" style="tabl
>e-layout: fixed; width: 100%;"> 
62      <thead>56      <tbody>
63        <tr>57        <tr style="background-color: rgb(238, 238, 238);">
64          <th scope="col">58          <td colspan="2">
65            &nbsp;
66          </th>
67          <th scope="col">
68            &nbsp;
69          </th>
70        </tr>
71      </thead>
72      <tbody>
73        <tr>
74          <td>
75            <p>
76              <code>p::first-line { text-transform: uppercase }</59            <code>p::first-line { text-decoration: uppercase }</c
>code>>ode><br>
77            </p>
78          </td>
79          <td>
80            <p>
81              Change the letters of the first line of every parag60            Change the letters of the first line of every paragra
>raph to uppercase>ph to uppercase.
82            </p>
83          </td>
84        </tr>
85        <tr>
86          <td>61          </td>
87            <p>
88              Lorem ipsum dolor sit amet, consectetur adipisicing
> elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam 
>co laboris nisi ut aliquip ex ea commodo consequat. 
89            </p>
90            <p>
91              Duis aute irure dolor in reprehenderit in voluptate
> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin 
>t occaecat cupidatat non proident, sunt in culpa qui officia dese 
>runt mollit anim id est laborum. 
92            </p>
93          </td>62        </tr>
63        <tr>
64          <td class="example">
65            <strong>Live Example</strong>
94          <td>66          </td>
67          <td>
68            <strong>Reference Result</strong>
69          </td>
70        </tr>
71        <tr>
72          <td class="example">
73            <div style="width:20em;">
74              <p>
75                Lorem ipsum dolor sit amet, consectetur adipisici
 >ng elit, sed do eiusmod tempor incididunt ut labore.
76              </p>
77              <p>
78                Duis aute irure dolor in reprehenderit in volupta
 >te velit esse cillum dolore eu fugiat nulla pariatur.
79              </p>
80            </div>
81          </td>
82          <td>
83            <div style="width:20em;">
84              <p>
85                LOREM IPSUM DOLOR SIT AMET,&nbsp; consectetur adi
 >pisicing elit, sed do eiusmod tempor incididunt ut labore.
86              </p>
87              <p>
88                DUIS AUTE IRURE DOLOR IN reprehenderit in volupta
 >te velit esse cillum dolore eu fugiat nulla pariatur.
89              </p>
90            </div>
91          </td>
92        </tr>
93      </tbody>
94    </table>
95    <p>
95            &nbsp;96      &nbsp;
97    </p>
98    <table class="standard-table">
99      <tbody>
100        <tr style="background-color: rgb(238, 238, 238);">
101          <td colspan="2">
102            <code>p::first-line { margin-left: 20px }</code><br>
103            Does nothing, <code>margin-left</code> cannot be appl
 >ied to a first-line pseudo-element.
104          </td>
105        </tr>
106        <tr>
107          <td class="example">
108            <strong>Live Example</strong>
109          </td>
110          <td>
111            <strong>Reference Result</strong>
112          </td>
113        </tr>
114        <tr>
115          <td class="example2">
116            <div style="width:20em;">
117              <p>
118                Lorem ipsum dolor sit amet, consectetur adipisici
 >ng elit, sed do eiusmod tempor incididunt ut labore.
119              </p>
120              <p>
121                Duis aute irure dolor in reprehenderit in volupta
 >te velit esse cillum dolore eu fugiat nulla pariatur.
122              </p>
123            </div>
124          </td>
125          <td>
126            <div style="width:20em;">
127              <p>
128                Lorem ipsum dolor sit amet, consectetur adipisici
 >ng elit, sed do eiusmod tempor incididunt ut labore.
129              </p>
130              <p>
131                Duis aute irure dolor in reprehenderit in volupta
 >te velit esse cillum dolore eu fugiat nulla pariatur.
132              </p>
133            </div>

Back to History