क्या मैं एकल चयनकर्ता के साथ सभी <H> टैग को लक्षित कर सकता हूं?

Question

मैं एक पृष्ठ पर सभी एच टैग को लक्षित करना चाहता हूं। मुझे पता है आप इसे इस तरह से कर सकते हैं ...

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

लेकिन वहाँ उन्नत सीएसएस चयनकर्ताओं का उपयोग कर ऐसा करने का एक और अधिक कुशल तरीका है? जैसे कुछ:

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

(लेकिन स्पष्ट रूप से यह काम नहीं करता है)

Comments

यह चयन करते समय तेजी से थकाऊ हो जाता हैh1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...

— 4

Answer 1

नहीं, अल्पविराम से अलग की गई सूची वही है जो आप इस मामले में चाहते हैं।

Comments

Google से यहां आने वालों के लिए, और सीएसएस में कॉमा-सेपरेटेड लिस्ट का मतलब क्या है , यह सोचकर , यह पहला उदाहरण ओपी ने दिया। यही कारण है, h1, h2, h3 {}।

— 1919

Answer 2

यह बुनियादी सीएसएस नहीं है, लेकिन यदि आप LESS ( http://lesscss.org ) का उपयोग कर रहे हैं, तो आप पुनरावृत्ति का उपयोग करके ऐसा कर सकते हैं:

.hClass (@index) when (@index > 0) {
    h@{index} {
        font: 32px/42px trajan-pro-1,trajan-pro-2;
    }
    .hClass(@index - 1);
}
.hClass(6);

Sass ( http://sass-lang.com ) आपको इसे प्रबंधित करने की अनुमति देगा, लेकिन पुनरावृत्ति नहीं होने देगा; उनके पास @forइन उदाहरणों के लिए वाक्य रचना है:

@for $index from 1 through 6 {
  h#{$index}{
    font: 32px/42px trajan-pro-1,trajan-pro-2;
  }
}

यदि आप एक गतिशील भाषा का उपयोग नहीं कर रहे हैं, जो सीएसएस जैसे लेस या सैस के लिए संकलित है, तो आपको निश्चित रूप से इनमें से एक विकल्प की जांच करनी चाहिए। वे वास्तव में सरल और आपके सीएसएस विकास को अधिक गतिशील बना सकते हैं।

Comments

मुझे पूरा यकीन है कि सीएसएस में लूप बनाने की तुलना में मैन्युअल रूप से टाइप करना है जैसे एच 1, एच 2, एच 3 ... कम समय लगता है, स्थान .. अभी और बाद में समझने के लिए अधिक स्पष्ट।

— मुहम्मद उमेर

¯_ (¯) _ / ツ "can" != "should"। फिर भी, Sass / LESS विकल्प आपको एक्स्टेंसिबिलिटी प्रदान करते हैं जो वैनिला सीएसएस नहीं करता है। जैसे कुछ सोचो font-size: (48px / @index)।

— स्टीव

यह ठीक है अगर यह आपकी आवश्यकताओं के लिए सबसे उपयुक्त है। जैसा कि पहले टिप्पणी में उल्लेख किया गया है, यदि आपको किसी कारणवश LESS या Sass में अनुक्रमणिका को संचालित करने की आवश्यकता है, तो यह दृष्टिकोण आपको इतनी आसानी से करने की अनुमति देता है। हेडर नंबर के आधार पर आपका कार्यान्वयन गतिशील हो सकता है।

— स्टीव

लोग हैं, जो एकीकृत करने के लिए नहीं करना चाहते हैं के लिए scss/sassअपनी परियोजना में है, लेकिन उत्पन्न करना चाहते हैं cssके साथ scss/sassवे इस ऑनलाइन उपकरण कहा जाता है का उपयोग कर सकते sassmeister

— समीर खान

Answer 3

यदि आप SASS का उपयोग कर रहे हैं तो आप इस मिश्रण का भी उपयोग कर सकते हैं:

@mixin headings {
    h1, h2, h3,
    h4, h5, h6 {
        @content;
    }
}

इसका उपयोग ऐसे करें:

@include headings {
    font: 32px/42px trajan-pro-1, trajan-pro-2;
}

---

संपादित करें: प्रत्येक शीर्ष तत्व पर प्लेसहोल्डर चयनकर्ता को वैकल्पिक रूप से विस्तारित करके ऐसा करने का मेरा व्यक्तिगत पसंदीदा तरीका है।

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

फिर मैं सभी शीर्षकों को लक्षित कर सकता हूं जैसे मैं किसी भी एकल वर्ग को लक्षित करूंगा, उदाहरण के लिए:

.element > %headings {
    color: red;
}

Comments

यह SCSS से SCSS + कम्पास के लिए एक बहुत छोटा कदम है: कम्पास-style.org/reference/compass/helpers/selectors - शीर्षकों ($ से, $ से)

— इंपीरियल

वाह, इस दो साल बाद आया .. और संपादित सुनहरा लग रहा है! मुझे यकीन है कि मैं !optionalहालांकि विस्तार पर ध्वज के उद्देश्य को समझता हूं? और गूगल पर कुछ भी खोजने के लिए प्रतीत नहीं कर सकते ...

— बिल

Answer 4

SCSS + कम्पास इसे एक स्नैप बनाता है, क्योंकि हम पूर्व-प्रोसेसर के बारे में बात कर रहे हैं।

#{headings(1,5)} {
    //definitions
  }

आप यहाँ सभी कम्पास सहायक चयनकर्ताओं के बारे में जान सकते हैं :

Answer 5

स्टाइलस के चयनकर्ता प्रक्षेप

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;

Comments

यह काम नहीं करता। कृपया उत्तर पोस्ट करने से पहले अपने कोड का परीक्षण करें क्योंकि यह किसी के लिए हानिकारक है जो इसका उपयोग करने की कोशिश कर सकता है। मैंने आपके उत्तर को परीक्षण किए गए और काम कर रहे कोड के साथ संपादित किया।

— हाइब्रिड वेब देव

@ हाइब्रिडदेव यह मेरे लिए काम कर रहा है। यह भी है कि कैसे डॉक्स पुनरावृत्ति का

— लैगिंगसर्फ़्लेक्स

Answer 6

सभी h टैग्स (h1, h2 etc) के लिए jQuery का चयनकर्ता ": हैडर" है। उदाहरण के लिए, यदि आप jQuery के साथ सभी h टैग्स को लाल रंग में बनाना चाहते हैं, तो उपयोग करें:

$(':header').css("color","red")

Comments

क्या आप एक विशिष्ट div के भीतर सभी शीर्षकों को लक्षित कर सकते हैं? जैसे $('.my_div :header').css("color","red")?

— user1063287

Answer 7

वेनिला सीएसएस से निपटने के लिए h1..h6तत्वों के पूर्वजों में पैटर्न की तलाश करें :

<section class="row">
  <header>
    <h1>AMD RX Series</h1>
    <small>These come in different brands and types</small>
  </header>
</header>

<div class="row">
  <h3>Sapphire RX460 OC 2/4GB</h3>
  <small>Available in 2GB and 4GB models</small>
</div>

यदि आप पैटर्न को देख सकते हैं, तो आप एक चयनकर्ता लिखने में सक्षम हो सकते हैं, जो आपको चाहिए। उपरोक्त उदाहरण को देखते हुए सभी h1..h6तत्वों को CSS3 से :first-childऔर :notछद्म वर्गों के संयोजन से लक्षित किया जा सकता है , जो सभी आधुनिक ब्राउज़रों में उपलब्ध हैं, जैसे:

.row :first-child:not(header) { /* ... */ }

भविष्य में उन्नत छद्म श्रेणी के चयनकर्ताओं :has(), और बाद के भाई-बहनों ( ~) को और भी अधिक नियंत्रण प्रदान करेगा क्योंकि वेब मानक समय के साथ विकसित होते रहेंगे।

Answer 8

आप PostCSS और कस्टम चयनकर्ता प्लगइन का भी उपयोग कर सकते हैं

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

article :--headings {
  margin-top: 0;
}

आउटपुट:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 0;
}

Answer 9

आप अपने दस्तावेज़ के सभी शीर्षकों को .class कर सकते हैं यदि आप उन्हें एक एकल चयनकर्ता के साथ लक्षित करना चाहते हैं, तो निम्नानुसार।

<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>

और सीएसएस में

.heading{
    color: #Dad;
    background-color: #DadDad;
}

मैं यह नहीं कह रहा हूं कि यह हमेशा सबसे अच्छा अभ्यास है, लेकिन यह उपयोगी हो सकता है, और वाक्यविन्यास को लक्षित करने के लिए, कई मायनों में आसान है,

इसलिए यदि आप HTML में h6 के समान .heading वर्ग के माध्यम से सभी h1 देते हैं, तो आप उन्हें किसी भी html डॉक्स के लिए संशोधित कर सकते हैं जो उस सीएसएस शीट का उपयोग करते हैं।

उल्टा, अधिक वैश्विक नियंत्रण बनाम "खंड div लेख h1, आदि {}",

नकारात्मक पक्ष, सीएसएस में सभी चयनकर्ताओं को जगह पर बुलाने के बजाय, आपके पास html में बहुत अधिक टाइपिंग होगी, फिर भी मुझे लगता है कि html में एक वर्ग होने से सभी शीर्षकों को लक्षित करना फायदेमंद हो सकता है, बस पूर्वता से सावधान रहें सीएसएस, क्योंकि संघर्ष से उत्पन्न हो सकता है

Answer 10

नया :is()सीएसएस छद्म वर्ग इसे एक चयनकर्ता में कर सकता है:

:is(h1, h2, h3, h4, h5, h6) {
  color: red;
}