Selectors in CSS

Selectors are used to select specific elements from the DOM and then apply styles. Here is the list of important selectors.
  • element - selects elements with given tag
  • [title='softpost'] - select every element having title attribute value as 'softpost'
  • .className - selects all elements matching class name
  • #id - Selects element with given id
  • .class1.class2 - select element that has both classes
  • .class1 .class2 - select element with class class2 but it must be nested inside an element having class class1.
  • input:valid and input:invalid - selects all input elements with valid/invalid values
  • input:checked - select every checked input element
  • input:disabled - select every disabled input element
  • input:focus - select element that has a focus
  • button:focus-within - select element that has a focus or it's descendants have focus
  • :root - selects the root element. It has greater specificity than html element
  • * - select all elements
  • ::selection - selects the portion of an element that is selected by user

Web development and Automation testing

solutions delivered!!