सीएसएस की बेहतरीन सुविधाएं

कल ऑफ़िस में, हम सीएसएस के लिए एक अनोखी और जादुई करतब दिखा रहे थे. इसे एक उदाहरण के तौर पर ही देख लें. इससे खाली लिंक दिखने लगते हैं:

a[href = ""] {
    background: red;
    color: white;
    font-size: x-large;
}

jsFiddle पर लाइव उदाहरण देखें

पूरे लिंक को मिलते-जुलते लिंक की स्टाइल से अलग स्टाइल में भी बनाया जा सकता है:

a[href ^= http] {
    display: inline-block;
    color: red;
    transform: rotate(180deg);
}

jsFiddle पर लाइव उदाहरण देखें

अगर आपको अपने डोमेन से बाहर ले जाने वाले लिंक के लिए अलग स्टाइल चाहिए, तो :not() सिलेक्टर का इस्तेमाल किया जा सकता है. दरअसल, हम HTML5Rocks में बाहरी लिंक के बगल में मौजूद छोटे ऐरो का इस्तेमाल करते हैं.

a[href ^= 'http']:not([href *= 'html5rocks.']) {
    background: transparent url(arrow.png) no-repeat center right;
    padding-right: 16px;
}

jsFiddle पर लाइव उदाहरण देखें

आपको यह याद दिलाने के लिए कि आप लिंक को स्टाइल करने तक ही सीमित नहीं हैं, यहां सभी PNG इमेज को उलटा करने का तरीका बताया गया है:

img[src $= .png] {
    filter: invert(100%);
}

एट्रिब्यूट सिलेक्टर के बारे में जानें. क्या आपको पता है कि दस्तावेज़ के हेड को दूसरे एलिमेंट के साथ-साथ दिखाया जा सकता है?

head {
    display: block;
    border-bottom: 5px solid red;
}
script, style, link {
    display: block;
    white-space: pre;
    font-family: monospace;
}

इसके अलावा, :after और :before कॉन्टेंट को भरने के लिए आप सीएसएस attr-फ़ंक्शन की शानदार क्षमता का इस्तेमाल कर सकते हैं?

script:before {
    content: "<script src=\"" attr(src) "\" type=\"" attr(type) "\">";
}
script:after {
    content: "</script>";
}

style:before {
    content: "<style type=\"" attr(type) "\">";
}
style:after {
    content: "< /style>";
}

/* And for a finish, <link> */
link:before {
    content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
}

jsFiddle पर लाइव उदाहरण देखें

ध्यान दें कि attr(), मेल खाने वाले एलिमेंट की एट्रिब्यूट वैल्यू को पढ़ता है. इसलिए, अगर इसे #foo:before के लिए इस्तेमाल किया जाता है, तो यह #foo के एट्रिब्यूट को पढ़ता है.