:first-child
इस Class द्वारा सिर्फ Container के सबसे पहले वाले Element को Target किया जाता हैं। जैसे आपके पास दो Div Element हैं और प्रत्येक Div में तीन -तीन Paragraph Element Defined हैं। तो यह Class प्रत्येक Div के सबसे पहले वाले Paragraph को Target करेगी।
:first-child
Only the first element of the container is targeted by this class. Like you have two Div Elements and each Div has three Paragraph Elements defined. So this class will target the first paragraph of each div.
Example:
|
<html> <head> <style> p { width:400px; } p:first-child { background-color:black; color:yellow; } </style> </head> <body> <div> <p>This paragraph will be targeted because it is first child of its parent div.</p> <p>This paragraph will not be targeted because it is second child. </div> <div><p>This paragraph will be targeted because it is first child of its parent div.</p> <p>This paragraph will not be targeted because it is second child. </div> </body> </html> |