BasicsIntroduction Adding styles Selectors Headings and Text Lists Links Tables Colors Background Box Model Fonts Icons Display Position Overflow Align Images Tool tips Flex
AdvancedShadows Rounded Corners Units Specificity Responsive design Media Queries Grid Animations Psuedo elements CSS variables and functions SASS and SCSS
MiscellaneousCSS Templates CSS Interview QnA
Selectors in CSSSelectors 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