DEV Community

Raizo-03
Raizo-03

Posted on

DAY 2 OF CSS

🎯 Overview of CSS Selectors

CSS selectors are patterns used to select and style HTML elements. They are the foundation of CSS styling, allowing you to target specific elements or groups of elements with precision.

🏷️ Basic Selectors

1. Universal Selector (*)

Selects all elements on the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

2. Element Selector (Type Selector)

Selects all elements of a specific HTML tag.

p {
    color: #333;
    line-height: 1.6;
}

h1 {
    font-size: 2em;
    color: navy;
}
Enter fullscreen mode Exit fullscreen mode

3. Class Selector (.classname)

Selects elements with a specific class attribute.

.highlight {
    background-color: yellow;
    padding: 5px;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
}
Enter fullscreen mode Exit fullscreen mode

4. ID Selector (#idname)

Selects the element with a specific ID attribute.

#header {
    background-color: #333;
    color: white;
    padding: 20px;
}

#main-content {
    max-width: 800px;
    margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

🔗 Combinator Selectors

1. Descendant Selector ()

Selects elements that are descendants of another element.

/* Selects all <p> elements inside <div> elements */
div p {
    font-style: italic;
}

/* Selects all <a> elements inside elements with class "nav" */
.nav a {
    text-decoration: none;
    color: #333;
}
Enter fullscreen mode Exit fullscreen mode

2. Child Selector (>)

Selects elements that are direct children of another element.

/* Selects only direct <li> children of <ul> */
ul > li {
    list-style-type: disc;
}

/* Selects direct <p> children of <div> with class "container" */
.container > p {
    margin-bottom: 15px;
}
Enter fullscreen mode Exit fullscreen mode

3. Adjacent Sibling Selector (+)

Selects the element immediately following another element.

/* Selects the first <p> that comes immediately after an <h1> */
h1 + p {
    font-weight: bold;
    margin-top: 0;
}

/* Selects <label> immediately following <input> */
input + label {
    margin-left: 10px;
}
Enter fullscreen mode Exit fullscreen mode

4. General Sibling Selector (~)

Selects all siblings that come after a specific element.

/* Selects all <p> elements that are siblings after <h2> */
h2 ~ p {
    color: #666;
}

/* Selects all <div> elements that are siblings after <header> */
header ~ div {
    margin-top: 20px;
}
Enter fullscreen mode Exit fullscreen mode

🎨 Pseudo-Class Selectors

1. Dynamic Pseudo-Classes

Respond to user interactions.

/* Hover effect */
a:hover {
    color: #ff6b6b;
    text-decoration: underline;
}

/* Focus state for form elements */
input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Active state when clicking */
button:active {
    transform: scale(0.95);
}

/* Visited links */
a:visited {
    color: purple;
}
Enter fullscreen mode Exit fullscreen mode

2. Structural Pseudo-Classes

Based on element position in the document.

/* First child element */
p:first-child {
    font-weight: bold;
}

/* Last child element */
li:last-child {
    border-bottom: none;
}

/* Nth child (odd/even or specific numbers) */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:nth-child(odd) {
    background-color: white;
}

/* Every 3rd element */
div:nth-child(3n) {
    margin-right: 0;
}

/* First of type */
h2:first-of-type {
    margin-top: 0;
}
Enter fullscreen mode Exit fullscreen mode

🔤 Pseudo-Element Selectors

Create virtual elements for styling specific parts of an element.

/* Style the first letter of paragraphs */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #333;
}

/* Style the first line of paragraphs */
p::first-line {
    font-variant: small-caps;
}

/* Add content before elements */
.quote::before {
    content: """;
    font-size: 1.5em;
    color: #666;
}

/* Add content after elements */
.quote::after {
    content: """;
    font-size: 1.5em;
    color: #666;
}
Enter fullscreen mode Exit fullscreen mode

📋 Attribute Selectors

Select elements based on their attributes.

1. Basic Attribute Selectors 

/* Elements with a specific attribute */
[title] {
    border-bottom: 1px dotted #333;
}

/* Elements with a specific attribute value */
[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}

/* Elements with attribute containing specific value */
[class~="highlight"] {
    background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

2. Advanced Attribute Selectors 

/* Attribute starts with specific value */
[href^="https"] {
    color: green;
}

/* Attribute ends with specific value */
[src$=".jpg"] {
    border: 2px solid #333;
}

/* Attribute contains specific substring */
[title*="important"] {
    font-weight: bold;
}

/* Attribute starts with value followed by hyphen */
[lang|="en"] {
    font-family: "English Font", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

🎯 Grouping Selectors

Apply the same styles to multiple selectors.

/* Group multiple selectors with commas */
h1, h2, h3 {
    color: #333;
    font-family: Georgia, serif;
}

.primary-btn, .secondary-btn, .danger-btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

🔄 Selector Specificity

Understanding how CSS determines which rules to apply when multiple selectors target the same element.

Specificity Hierarchy (from highest to lowest):

  1. Inline styles (style="...") - 1000 points
  2. IDs (#id) - 100 points
  3. Classes, attributes, pseudo-classes (.class, [attr], :hover) - 10 points
  4. Elements and pseudo-elements (div, ::before) - 1 point

Examples: 

/* Specificity: 1 (element) */
p { color: black; }

/* Specificity: 10 (class) */
.text { color: blue; }

/* Specificity: 100 (ID) */
#special { color: red; }

/* Specificity: 111 (ID + class + element) */
#special .text p { color: green; }
Enter fullscreen mode Exit fullscreen mode

💡 Practical Examples

Navigation Menu Styling 

/* Basic navigation */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
}

nav ul li a:hover {
    background-color: #f0f0f0;
    border-radius: 5px;
}

nav ul li:last-child {
    margin-right: 0;
}
Enter fullscreen mode Exit fullscreen mode

Form Styling 

/* Form inputs */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Required fields */
input[required] {
    border-left: 3px solid #ff6b6b;
}
Enter fullscreen mode Exit fullscreen mode

🔍 Key Takeaways

  • Basic selectors target elements by tag, class, or ID
  • Combinator selectors target elements based on their relationship to other elements
  • Pseudo-classes target elements in specific states (:hover, :focus, :nth-child)
  • Pseudo-elements create virtual elements (::before, ::after, ::first-letter)
  • Attribute selectors target elements based on their attributes
  • Specificity determines which styles are applied when multiple rules conflict
  • Grouping selectors helps apply the same styles to multiple elements efficiently

Top comments (0)