Sometimes we do a cursory check on user input controls before they\u2019re all set for data validation and submission. For instance, a form might only unlock its submit button when the user has filled in a certain number of fields. Or a user needs to fill in a field in the right way to take the next step.<\/p>\n\n\n\n
This is a great way to cut down on submission mistakes and help users make sure everything is as right as possible for submission with less hassle<\/strong>. It\u2019s even more effective when designed to give real-time feedback.<\/p>\n\n\n\n CSS lets you handle some of these simple checks right away, even before the browser\u2019s validation routine runs following a submission trigger. The Similarly, the<\/strong> The :valid<\/code> and :invalid<\/code> pseudo-classes are good examples of that. They allow browsers style fields as you type, so you can see if the data you\u2019re entering is in the right format.<\/p>\n\n\n\nn of <selector-list><\/code> syntax in the<\/strong> :nth-child<\/code> selector can also be very useful for a preliminary validation<\/strong>. First, let\u2019s see what it does.<\/p>\n\n\n\nAbout
n of<\/code> selectors<\/h2>\n\n\n\n:nth-child()<\/code> selector picks elements from all siblings, counting from the first. The n of selectors<\/code> syntax version does the same, but only from siblings matching the given selectors<\/strong>.<\/p>\n\n\n\/* selects second element *\/<\/span>\n:nth-child(2)<\/span> { }\n\n\/* selects second of all elements with class marked *\/<\/span>\n:nth-child(2<\/span> of<\/span> .marked<\/span>) { }<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n