আমি কি একক নির্বাচক সহ সমস্ত <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, ...

— Vortico

Answer 1

না, কমা-বিচ্ছিন্ন তালিকাটি এই ক্ষেত্রে আপনি যা চান তা।

Comments

গুগল থেকে এখানে অবতরণকারীদের জন্য এবং সিএসএসে কমা-বিচ্ছিন্ন তালিকার অর্থ কী তা ভাবছেন , এটি ওপি প্রথম উদাহরণ দিয়েছে। যে h1, h2, h3 {},।

— bluesmonk

Answer 2

এটি বেসিক সিএসএস নয়, তবে আপনি যদি কম ব্যবহার করেন ( http://lesscss.org ) তবে আপনি পুনরাবৃত্তি ব্যবহার করে এটি করতে পারেন:

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

সাস ( 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"। তবুও, স্যাস / কম বিকল্পগুলি আপনাকে এমন এক্সটেনসিবিলিটি দেয় যা ভ্যানিলা সিএসএস দেয় না। এরকম কিছু ভাবুন font-size: (48px / @index)।

— স্টিভ

এটি আপনার প্রয়োজনের সাথে ফিট করে তবে ঠিক আছে। পূর্বের মন্তব্যে যেমন উল্লেখ করা হয়েছে, যদি কোনও কারণে আপনাকে কম বা সাসে সূচকটি পরিচালনা করতে হয় তবে এই পদ্ধতির সাহায্যে আপনি এত সহজেই কাজ করতে পারবেন। আপনার বাস্তবায়ন শিরোনাম সংখ্যার ভিত্তিতে গতিশীল হতে পারে।

— স্টিভ

যারা সংহত করতে চাই না 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

এটি এসসিএসএস থেকে এসসিএসএস + কম্পাসের একটি খুব ছোট পদক্ষেপ: কম্পাস- স্টাইল.অর্গ / রেফারেন্স / কমপাস / সাহায্যকারী / নির্বাচক - শিরোনাম ($ থেকে, $ থেকে)

— ইমপ্রেশনাল

বাহ, এই দুই বছর পরে এসেছিল .. এবং সম্পাদনাটি সোনার দেখাচ্ছে! আমি নিশ্চিত যে আমি !optionalপ্রসারিত পতাকাটির উদ্দেশ্য বুঝতে পেরেছি কি ? এবং গুগলে কিছু খুঁজে

— বিল

Answer 4

আমরা প্রসেসর প্রসেসরের বিষয়ে যেহেতু কথা বলছি এসসিএসএস + কম্পাস এটিকে স্ন্যাপ দেয়।

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

আপনি এখানে সমস্ত কম্পাস সহায়ক নির্বাচক সম্পর্কে শিখতে পারেন :

Answer 5

লেখনী এর নির্বাচক ক্ষেপক

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

Comments

এটা কাজ করে না. উত্তর পোস্ট করার আগে দয়া করে আপনার কোডটি পরীক্ষা করুন কারণ এটি যে কেউ ব্যবহারের চেষ্টা করতে পারে তার পক্ষে এটি ক্ষতিকারক। আমি পরীক্ষিত এবং কার্যকারী কোড সহ আপনার উত্তর সম্পাদনা করেছি।

— হাইব্রিড ওয়েব দেব 22

@ হাইব্রিড্বেবদেব মনে হয় এটি আমার পক্ষে কাজ করছে । এটিও ডক্সগুলি পুনরাবৃত্তির

— laggingreflex

Answer 6

সমস্ত এইচ ট্যাগের জন্য jQuery নির্বাচক (এইচ 1, এইচ 2 ইত্যাদি) ": শিরোনাম"। উদাহরণস্বরূপ, আপনি যদি jQuery এর সাথে সমস্ত এইচ ট্যাগকে লাল রঙের করতে চান তবে ব্যবহার করুন:

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

Comments

আপনি কি কেবল একটি নির্দিষ্ট ডিভের মধ্যে সমস্ত শিরোনামকে লক্ষ্য করতে পারেন? যেমন $('.my_div :header').css("color","red")?

— ব্যবহারকারী 1063287

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উপাদানের মিশ্রন দ্বারা লক্ষ্যবস্তু করা হতে পারে :first-childএবং :notসব আধুনিক ব্রাউজারে সিএসএস 3 থেকে সিউডো-ক্লাস, পাওয়া যায়, যেমন:

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

ভবিষ্যতে উন্নত সিউডো-শ্রেণির নির্বাচকগুলি :has()এবং পরবর্তী-ভাইবোন সংযুক্তকারীগুলি ( ~), আরও বেশি নিয়ন্ত্রণ সরবরাহ করবে যেহেতু সময়ের সাথে সাথে ওয়েব স্ট্যান্ডার্ডগুলি বিবর্তিত হতে থাকে।

Answer 8

আপনি পোস্টসিএসএস এবং কাস্টম নির্বাচনকারী প্লাগইনও ব্যবহার করতে পারেন

@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

আপনি যদি নিজের দলিলের সমস্ত শিরোনাম ক্লাস করতে পারেন তবে আপনি যদি কোনও একক নির্বাচিতকে লক্ষ্য করে লক্ষ্য করতে চান তবে নীচে,

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

এবং সিএসএসে

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

আমি বলছি না যে এটি সর্বদা সেরা অনুশীলন, তবে এটি কার্যকর হতে পারে এবং সিনট্যাক্সকে লক্ষ্য করে তোলার জন্য, বিভিন্ন উপায়ে সহজ,

সুতরাং আপনি যদি h6 এর মাধ্যমে সমস্ত এইচ 1 টি এইচটিএমএলে একই শিরোনামের ক্লাসটি দিয়ে থাকেন তবে আপনি সেই CSS শিটটি ব্যবহার করে এমন কোনও HTML ডক্সের জন্য তাদের সংশোধন করতে পারেন।

উল্টো দিকে, আরও বৈশ্বিক নিয়ন্ত্রণ বনাম "বিভাগ ডিভিশন নিবন্ধ এইচ 1, ইত্যাদি,}",

ডাউনসাইড, পরিবর্তে সিএসএসে সমস্ত নির্বাচককে কল করার পরিবর্তে, আপনার এইচটিএমএলটিতে আরও অনেক বেশি টাইপ করা হবে, তবুও আমি দেখতে পেয়েছি যে সমস্ত শিরোনামকে লক্ষ্য করার জন্য এইচটিএমএল-তে একটি ক্লাস থাকা উপকারী হতে পারে, কেবলমাত্র অগ্রাধিকারের ক্ষেত্রে সতর্ক থাকুন সিএসএস, কারণ দ্বন্দ্ব থেকে উদ্ভূত হতে পারে

Answer 10

নতুন :is()সিএসএস সিউডো-ক্লাসটি একজন নির্বাচকের মধ্যে এটি করতে পারে:

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