Advanced Techniques

Take your CSS skills to the next level with advanced selectors and effects.

Advanced Selectors

Attribute Selectors

Target elements by attributes:

/* Exact match */
input[type="text"] {
    border: 1px solid #ccc;
}

/* Starts with */
a[href^="https"] {
    color: green;
}

/* Ends with */
img[src$=".png"] {
    border: 1px solid gray;
}

/* Contains */
a[href*="example"] {
    color: purple;
}

/* Word match */
[class~="highlight"] {
    background-color: yellow;
}

/* Hyphenated match */
[lang|="en"] {
    color: blue;
}

Pseudo-classes

Structural Pseudo-classes

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

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

/* Nth child */
li:nth-child(2) {
    color: red;
}

li:nth-child(odd) {
    background-color: #f5f5f5;
}

li:nth-child(3n) {
    /* Every 3rd element */
}

/* Only child */
p:only-child {
    margin: 0;
}

/* Of type */
p:nth-of-type(2) {
    color: blue;
}

/* First of type */
p:first-of-type {
    font-weight: bold;
}

/* Last of type */
p:last-of-type {
    margin-bottom: 0;
}

Form Pseudo-classes

input:enabled {
    background-color: white;
}

input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

input:checked {
    accent-color: blue;
}

input:required {
    border: 2px solid red;
}

input:optional {
    border: 1px solid gray;
}

input:valid {
    border-color: green;
}

input:invalid {
    border-color: red;
}

textarea:placeholder-shown {
    color: #999;
}

input:placeholder-shown {
    opacity: 0.6;
}

Other Useful Pseudo-classes

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:active {
    color: red;
}

p:target {
    background-color: yellow;
}

div:empty {
    display: none;
}

a:not([href]) {
    color: gray;
}

li:not(:first-child) {
    border-top: 1px solid #ddd;
}

Pseudo-elements

::before and ::after

blockquote::before {
    content: '"';
    font-size: 2em;
    color: #999;
}

blockquote::after {
    content: '"';
    font-size: 2em;
    color: #999;
}

.icon::before {
    content: '→';
    margin-right: 8px;
}

Other Pseudo-elements

p::first-line {
    font-weight: bold;
    color: blue;
}

p::first-letter {
    font-size: 2em;
    float: left;
}

input::placeholder {
    color: #999;
}

input::selection {
    background-color: blue;
    color: white;
}

/* Scrollbar styling (Webkit browsers) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

Filters

Apply visual effects to elements:

img {
    /* Grayscale */
    filter: grayscale(100%);
    filter: grayscale(50%);
    
    /* Brightness */
    filter: brightness(150%);
    filter: brightness(50%);
    
    /* Contrast */
    filter: contrast(150%);
    
    /* Blur */
    filter: blur(5px);
    
    /* Saturate */
    filter: saturate(200%);
    
    /* Sepia */
    filter: sepia(100%);
    
    /* Hue rotate */
    filter: hue-rotate(90deg);
    
    /* Invert */
    filter: invert(100%);
    
    /* Drop shadow */
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    
    /* Opacity */
    filter: opacity(50%);
    
    /* Combine multiple */
    filter: brightness(110%) contrast(120%) drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
}

Real Filter Examples

<style>
    img {
        width: 200px;
        margin: 10px;
    }
    
    .grayscale { filter: grayscale(100%); }
    .blur { filter: blur(5px); }
    .bright { filter: brightness(150%); }
    .contrast { filter: contrast(150%); }
    .sepia { filter: sepia(100%); }
    .invert { filter: invert(100%); }
</style>

<img src="photo.jpg" class="grayscale">
<img src="photo.jpg" class="blur">
<img src="photo.jpg" class="bright">

Backdrop Filter

Blur/effect behind an element (requires transparent element):

.popup {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

.modal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px) brightness(0.8);
}

Custom Properties (CSS Variables)

Define and reuse values:

:root {
    --primary-color: #0066cc;
    --secondary-color: #f97316;
    --spacing: 20px;
    --border-radius: 8px;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

.card {
    border: 2px solid var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

/* With fallback */
.element {
    color: var(--custom-color, blue);
}

/* With calc() */
.component {
    width: calc(100% - var(--spacing) * 2);
    padding: calc(var(--spacing) / 2);
}

/* In media queries */
@media (max-width: 768px) {
    :root {
        --spacing: 10px;
    }
}

Calc() Function

Dynamic calculations:

.container {
    width: calc(100% - 40px);
    height: calc(100vh - 60px);
    padding: calc(20px + 2%);
    margin: calc(var(--spacing) * 2);
}

.grid {
    grid-template-columns: repeat(auto-fit, minmax(calc(300px - 20px), 1fr));
}

Gradients

Linear Gradient

.element {
    background: linear-gradient(to right, #ff0000, #0000ff);
    background: linear-gradient(45deg, red, yellow, green);
    background: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
}

Radial Gradient

.element {
    background: radial-gradient(circle, white, blue);
    background: radial-gradient(ellipse, yellow, green);
    background: radial-gradient(circle at 30% 50%, red, blue, green);
}

Conic Gradient

.pie-chart {
    background: conic-gradient(red 0deg 90deg, yellow 90deg 180deg, green 180deg);
}

Multiple Gradients

.stripes {
    background: 
        linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%),
        url('pattern.png');
    background-size: 100% 100%, 200px 200px;
}

Masks

Hide parts of elements:

.image {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.circle-mask {
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}

Clip Path

Create custom shapes:

.triangle {
    width: 100px;
    height: 100px;
    background-color: blue;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.circle {
    width: 100px;
    height: 100px;
    background-color: red;
    clip-path: circle(50px at center);
}

.star {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );
}

Object Fit & Object Position

Control how media fits in container:

img {
    width: 300px;
    height: 300px;
    object-fit: cover;              /* Crop to fit */
    object-fit: contain;            /* Fit entirely, may have space */
    object-fit: fill;               /* Stretch to fit (default) */
    object-fit: scale-down;         /* Smaller of contain or original */
    
    object-position: center;        /* Position within container */
    object-position: top left;
}

Blend Modes

How elements blend with backgrounds:

.element {
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;
}

Real-World Advanced Example

<style>
    .card {
        position: relative;
        width: 300px;
        height: 400px;
        border-radius: 16px;
        overflow: hidden;
        background: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    
    .card-image {
        width: 100%;
        height: 60%;
        object-fit: cover;
        object-position: center;
        filter: brightness(110%) contrast(120%);
    }
    
    .card-content {
        padding: 20px;
        background: linear-gradient(to bottom, white, #f5f5f5);
    }
    
    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
        pointer-events: none;
    }
    
    .card:hover .card-image {
        filter: brightness(130%) contrast(140%) blur(1px);
    }
</style>

<div class="card">
    <img src="image.jpg" class="card-image">
    <div class="card-content">
        <h3>Card Title</h3>
        <p>Beautiful card with advanced effects</p>
    </div>
</div>

Best Practices

1. Progressive Enhancement - Use advanced features as enhancement, not requirement
2. Browser Support - Check caniuse.com for support
3. Performance - Some effects (filters, masks) can impact performance
4. Accessibility - Ensure advanced effects don't hinder usability
5. Consistency - Use CSS variables for maintainability
6. Testing - Test across different browsers and devices

Next Steps

You've mastered advanced CSS techniques! Now:

1. Build real-world projects
2. Combine all concepts together
3. Keep learning and experimenting
4. Stay updated with new CSS features