\n| ID<\/td>\n | #id {}<\/span><\/td>\n | Only the unique ID<\/td>\n | Single element<\/td>\n | High<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Summary:<\/strong><\/p>\n\n- Element selectors apply styles to all instances of a tag.<\/li>\n
- Class selectors apply styles to any elements sharing the same class.<\/li>\n
- ID selectors apply styles to one unique element only.<\/li>\n<\/ul>\n
Understanding and properly using selectors helps you build cleaner, organized, and scalable CSS for your web projects.<\/p>\n Attribute selectors and pseudo-classes (hover, focus, etc.)<\/h2>\nCSS offers powerful ways to target elements based on their attributes or user interactions without needing extra classes or IDs.
\nTwo essential features for this are attribute selectors and pseudo-classes like :hover, :focus, and many others.<\/p>\n Mastering these tools makes your styles more dynamic, flexible, and user-friendly.<\/p>\n 1. Attribute Selectors<\/h3>\nDefinition:<\/strong><\/p>\nAttribute selectors target HTML elements based on the presence or value of their attributes (such as href, src, alt, type, etc.).<\/p>\n Syntax:<\/strong><\/p>\nelement[attribute] {<\/em>
\nproperty: value;<\/em>
\n}<\/em><\/p>\nelement[attribute=”value”] {<\/em>
\nproperty: value;<\/em>
\n}<\/em><\/p>\nTypes of Attribute Selectors:<\/strong><\/p>\n\nSummary Table<\/strong><\/caption>\n\n\n| Syntax<\/th>\n | Meaning<\/th>\n<\/tr>\n<\/thead>\n | \n\n[attr]<\/code><\/td>\n| Selects elements with the attribute<\/td>\n<\/tr>\n | \n[attr=\"value\"]<\/code><\/td>\n| Selects elements with an exact value<\/td>\n<\/tr>\n | \n[attr~=\"value\"]<\/code><\/td>\n| Value in a space-separated list (one word match)<\/td>\n<\/tr>\n | \n[attr^=\"value\"]<\/code><\/td>\n| Value starts with specified string<\/td>\n<\/tr>\n | \n[attr$=\"value\"]<\/code><\/td>\n| Value ends with specified string<\/td>\n<\/tr>\n | \n[attr*=\"value\"]<\/code><\/td>\n| Value contains specified string<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Examples:<\/strong><\/p>\n1. Select all links (<a>) with an href attribute:<\/strong><\/p>\na[href] {<\/em>
\ncolor: blue;<\/em>
\n}<\/em><\/p>\n2. Select only links to external websites:<\/strong><\/p>\na[href^=”http”] {<\/em>
\ncolor: green;<\/em>
\n}<\/em><\/p>\n\n- Targets links where href starts with “http”.<\/li>\n<\/ul>\n
3. Select input fields of type “email”:<\/strong><\/p>\ninput[type=”email”] {<\/em>
\nborder: 2px solid blue;<\/em>
\n}<\/em><\/p>\n4. Select images with alt text containing “logo”:<\/strong><\/p>\nimg[alt*=”logo”] {<\/em>
\nborder: 1px solid gray;<\/em>
\n}<\/em><\/p>\nBest Practice:<\/strong><\/p>\nUse attribute selectors when you want to style elements based on their function or purpose, without adding extra classes or IDs.<\/p>\n 2. Pseudo-Classes<\/h3>\nDefinition:<\/strong><\/p>\nPseudo-classes define a special state of an element.
\nThey allow you to style elements based on user interaction (like hover or focus), their position in the document, or other characteristics.<\/p>\n Syntax:<\/strong><\/p>\nselector:pseudo-class {<\/em>
\nproperty: value;<\/em>
\n}<\/em><\/p>\nCommon Pseudo-Classes:<\/strong><\/p>\n\nCommon Pseudo-Classes<\/strong><\/caption>\n\n\n| Pseudo-Class<\/th>\n | Meaning<\/th>\n<\/tr>\n<\/thead>\n | \n\n:hover<\/code><\/td>\n| When the user hovers over an element<\/td>\n<\/tr>\n | \n:focus<\/code><\/td>\n| When an element gains focus (e.g., input box)<\/td>\n<\/tr>\n | \n:active<\/code><\/td>\n| When an element is being clicked<\/td>\n<\/tr>\n | \n:visited<\/code><\/td>\n| A link that has already been visited<\/td>\n<\/tr>\n | \n:first-child<\/code><\/td>\n| Selects the first child of a parent<\/td>\n<\/tr>\n | \n:last-child<\/code><\/td>\n| Selects the last child of a parent<\/td>\n<\/tr>\n | \n:nth-child(n)<\/code><\/td>\n| Selects the nth child of a parent<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Examples:<\/strong><\/p>\n1. Change button color on hover:<\/strong><\/p>\nbutton:hover {<\/em>
\nbackground-color: orange;<\/em>
\ncolor: white;<\/em>
\n}<\/em><\/p>\n2. Highlight an input when it is focused:<\/strong><\/p>\ninput:focus {<\/em>
\nborder-color: green;<\/em>
\noutline: none;<\/em>
\n}<\/em><\/p>\n3. Style the first list item differently:<\/strong><\/p>\n | | | | | | | | | | | | | | | |