Compare Revisions

:only-child

Revision 494313:

Revision 494313 by kscarfone on

Revision 525973:

Revision 525973 by tregagnon on

Title:
:only-child
:only-child
Slug:
Web/CSS/:only-child
Web/CSS/:only-child
Tags:
"CSS","Selectors","CSS Pseudo-class","Web","Layout","Reference"
"CSS Pseudo-class","CSS","Reference","Référence","Web","Layout","Selectors"
Content:

Revision 494313
Revision 525973
n30    <p>n
31      <em>Live Sample : <a href="http://jsfiddle.net/Tripad/V5g9a
>/">http://jsfiddle.net/Tripad/V5g9a/</a></em> 
32    </p>
n40    &lt;span&gt;This span is the only child of its father&lt;/span37  &lt;span&gt;This span is the only child of its father&lt;/span&
>n&gt;>gt;
n44    &lt;span&gt;This span is one of the two children of its fathen41  &lt;span&gt;This span is one of the two children of its father&
>r&lt;/span&gt;>lt;/span&gt;
45    &lt;span&gt;This span is one of the two children of its fathe42  &lt;span&gt;This span is one of the two children of its father&
>r&lt;/span&gt;>lt;/span&gt;
n49      Reference resultn46      Result
n51    <div>n48    <p>
52      <span style="color: red;">This span is the only child of it49      {{EmbedLiveSample('Basic_example', '100%', 100)}}
>s father</span> 
53    </div>
54    <div>
55      <span>This span is one of the two children of its father</s
>pan> 
56    </div>
57    <div class="example1">
58      <span>This span is one of the two children of its father</s
>pan> 
59    </div>
60    <h3 id=".C2.A0">
61      &nbsp;
62    </h3>50    </p>
n66    <p>n
67      <em>Live Sample : <a href="http://jsfiddle.net/Tripad/b4bZa
>/">http://jsfiddle.net/Tripad/b4bZa/</a></em> 
68    </p>
n81    &lt;li&gt;Firstn66  &lt;li&gt;First
82        &lt;ul&gt;67    &lt;ul&gt;
83            &lt;li&gt;This is only child element68      &lt;li&gt;This is only child element
84        &lt;/ul&gt;
85    &lt;/li&gt;69    &lt;/ul&gt;
70  &lt;/li&gt;
86    &lt;li&gt;Second71  &lt;li&gt;Second
87        &lt;ul&gt;72    &lt;ul&gt;
88            &lt;li&gt;This list has two elements73      &lt;li&gt;This list has two elements
89            &lt;li&gt;This list has two elements74      &lt;li&gt;This list has two elements
90        &lt;/ul&gt;
91    &lt;/li&gt;75    &lt;/ul&gt;
76  &lt;/li&gt;
92    &lt;li&gt;Third77  &lt;li&gt;Third
93        &lt;ul&gt;78    &lt;ul&gt;
94            &lt;li&gt;This list has three elements79      &lt;li&gt;This list has three elements
95            &lt;li&gt;This list has three elements80      &lt;li&gt;This list has three elements
96            &lt;li&gt;This list has three elements81      &lt;li&gt;This list has three elements
97        &lt;/ul&gt;
98    &lt;/li&gt;82    &lt;/ul&gt;
83  &lt;/li&gt;
nn86    <h4>
87      Result
88    </h4>
101    <div>89    <p>
102      <ol>90      {{EmbedLiveSample('A_list_example', '100%', 150)}}
103        <li>First
104          <ul>
105            <li style="color: #6699ff; list-style-type: square; f
>ont-style: italic;">This list has only one element 
106            </li>
107          </ul>
108        </li>
109        <li>Second
110          <ul>
111            <li>This list has two elements
112            </li>
113            <li>This list has two elements
114            </li>
115          </ul>
116        </li>
117        <li>Third
118          <ul>
119            <li>This list has three elements
120            </li>
121            <li>This list has three elements
122            </li>
123            <li>This list has three elements
124            </li>
125          </ul>
126        </li>
127      </ol>
128    </div>91    </p>
t130    <pre class="brush: css">t
131p:only-child {
132    background: #6699ff;
133    width: 350px;
134}
135</pre>
136    <pre class="brush: html">
137&lt;div&gt;
138    &lt;p&gt;This is a paragraph with :only-child&lt;/p&gt;
139&lt;/div&gt;
140</pre>
141    <div>
142      <p style="background-color: #6699ff; width: 350px;">
143        This is a paragraph with :only-child
144      </p>
145    </div>

Back to History