Dev Stack Source

The :first-child CSS pseudo-class represents the first element among a group of sibling elements. /* Selects any <p> that is the first element among its siblings */ p:first-child { color : lime ; } Note : As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required. Syntax :first-child Examples Basic example HTML < div > < p > This text is selected! </ p > < p > This text isn't selected. </ p > </ div > < div > < h2 > This text isn't selected: it's not a `p`. </ h2 > < p > This text isn't selected. </ p > </ div > CSS p:first-child { color : lime ; background-color : black ; padding : 5px ; } Result Styling a list HTML < ul > < li > Item 1 </ li > < li > Item 2 </ li > < li > Item 3 < ul > < li > Item 3.1 </ li > ...

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key. /* Selects any <input> when focused */ input:focus { color : red ; } Note: This pseudo-class applies only to the focused element itself. Use :focus-within if you want to select an element that contains a focused element. Syntax :focus Examples HTML < input class = " red-input " value = " I ' ll be red when focused. " > < br > < input class = " blue-input " value = " I ' ll be blue when focused. " > CSS .red-input:focus { background : yellow ; color : red ; } .blue-input:focus { background : yellow ; color : blue ; } Result Accessibility concerns Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a bri...