🏰CSS Selector

CSS Selectors locate elements based on their attributes like id, class, tag type etc.

1. Class Name Example: <button class="signInBtn">Sign In</button> Selector: Button.signInBtn Explanation: Targets a button element with the class name "signInBtn".

2. ID Example: <input id="inputUsername" type="text" placeholder="Username"> Selector: input#inputUsername Explanation: Selects an input element with the ID "inputUsername".

3. Tagname[attribute='value'] Example: <input type="text" placeholder="Username" value=""> Selector: input[placeholder='Username'] Explanation: Selects an input element with the placeholder attribute set to "Username".

4. Child items Example: <header><div><button>Submit</button></div></header> Selector: header div button Explanation: Select a button element that is a descendant of a div element, which, in turn, is a descendant of a header element.

5. Attribute Contains Example: <input type="password" placeholder="Enter Password"> Selector: input[type*='pass'] Explanation: Selects an input element with an attribute type that contains the substring "pass".