Selectors: find the target of customization
Introduction to selectors
CSS (Cascading Style Sheets) selectors are patterns used to select the HTML elements you want to ...
Basic selectors
Here is an example of basic selectors: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
Attribute selectors
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
Pseudo selectors
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
Combinators
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
Pseudo elements
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
Select element with multiple classes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
Select elements by attributes with patterns
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
Other ways to select element by attribute
You can experiment with these: /* or using the fact that it has an attribute! */ [attr] { font-si...
Descendant vs direct child
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
Group selectors
By grouping selectors together, you can apply same style to elements selected by any of these sel...
Nested style rules
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...