সিএসএসে কোনও মান রয়েছে এমন একটি বৈশিষ্ট্য সহ আমি কীভাবে উপাদানগুলিকে লক্ষ্য করব?

Question 1

আমি জানি যে আমি সিএসএসে একটি নির্দিষ্ট বৈশিষ্ট্যযুক্ত এমন উপাদানগুলিকে লক্ষ্য করতে পারি , উদাহরণস্বরূপ:

input[type=text]
{
    font-family: Consolas;
}

তবে কি এমন উপাদানগুলিকে লক্ষ্য করে লক্ষ্য করা যায় যার কোন মানের একটি অ্যাট্রিবিউট থাকে (কিছুই বাদে যখন যখন উপাদানটিতে গুণটি যুক্ত করা হয়নি)?

মোটামুটি কিছু:

a[rel=*]
{
    color: red;
}

যা <a>এই এইচটিএমএলে প্রথম এবং তৃতীয় ট্যাগগুলি লক্ষ্য করে :

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

আমি অনুভব করেছি এটি সম্ভব হয়েছে কারণ ডিফল্টরূপে, cursor: pointerএমন কোনও <a>ট্যাগে প্রয়োগ করা হয়েছে বলে মনে হয় যার hrefবৈশিষ্ট্যের জন্য একটি মান রয়েছে ।

Question 2

নিম্নলিখিত কোনও অ্যাঙ্কর ট্যাগের সাথে একটি relগুণিত সংজ্ঞাযুক্ত বৈশিষ্ট্যের সাথে মিলবে :

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html# Pattern-matching

আপডেট: @vsync উল্লিখিত দৃশ্যের জন্য অ্যাকাউন্ট করার জন্য, মন্তব্য বিভাগে (এমটিপি / অ-ফাঁকা মানগুলির মধ্যে পার্থক্য), আপনি সিএসএস :not সিউডো-শ্রেণিকে অন্তর্ভুক্ত করতে পারেন :

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Question 3

হ্যাঁ সিএসএস 3 সিলেক্টারে বেশ কয়েকটি অ্যাট্রিবিউট সিলেক্টর রয়েছে ।

যেমন

[att] এট্রি অ্যাট্রিবিউটের সাথে একটি উপাদানকে প্রতিনিধিত্ব করে, গুণাবলীর মান যাই হোক না কেন।

[অ্যাট = ভ্যাল] অ্যাট অ্যাট্রিবিউটের সাথে এমন একটি উপাদান প্রতিনিধিত্ব করে যার মানটি হ'ল "ভাল"।

[অ্যাট ~ = ভাল] অ্যাটি অ্যাট্রিবিউটের সাথে এমন একটি উপাদান প্রতিনিধিত্ব করে যার মান একটি শ্বেত স্পেস-বিচ্ছিন্ন শব্দের তালিকা, যার মধ্যে একটি হ'ল "ভাল"। যদি "ভাল" শ্বেতস্পেস থাকে তবে এটি কখনই কোনও কিছু উপস্থাপন করে না (যেহেতু শব্দগুলি স্পেস দ্বারা পৃথক করা হয়)। এছাড়াও "ভাল" যদি খালি স্ট্রিং হয় তবে এটি কোনও কিছুর প্রতিনিধিত্ব করবে না।

[এট ^ = ভাল] অ্যাট অ্যাট্রিবিউটের সাথে এমন একটি উপাদান প্রতিনিধিত্ব করে যার মানটি "ভল" উপসর্গের সাথে শুরু হয়। যদি "ভাল" খালি স্ট্রিং হয় তবে নির্বাচক কোনও কিছুর প্রতিনিধিত্ব করে না।

[অ্যাট $ = ভাল] অ্যাট অ্যাট্রিবিউটের সাথে এমন একটি উপাদান প্রতিনিধিত্ব করে যার মানটি "ভাল" প্রত্যয় দিয়ে শেষ হয়। যদি "ভাল" খালি স্ট্রিং হয় তবে নির্বাচক কোনও কিছুর প্রতিনিধিত্ব করে না।

[অ্যাট * = ভ্যাল] অ্যাট অ্যাট্রিবিউটের সাথে এমন একটি উপাদান প্রতিনিধিত্ব করে যার মানটিতে "ভাল" স্ট্রিংয়ের অন্তত একটি উদাহরণ থাকে। যদি "ভাল" খালি স্ট্রিং হয় তবে নির্বাচক কোনও কিছুর প্রতিনিধিত্ব করে না।

Question 4

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

উদাহরণস্বরূপ, আমি আবিষ্কার করেছি যে 9 এর আগে IE এ, কলস্প্যানটি সমস্ত টেডির জন্য একটি সারণীতে সেট করা আছে, সুতরাং যে কোনও একক ঘরে 1 এর গোপন কলস্প্যান মান রয়েছে।

সুতরাং আপনি যদি আপনার ওয়েবডকটিতে "কলস্পান অ্যাট্রিবিউটযুক্ত কোনও টিডি" টার্গেট করে থাকেন, এমনকি টিডির কোনও কলসিপান অ্যাট্রিবিউট সেট থাকে না, যেমন কোনও টিডি একক কোষ, সিএসএস স্টাইলিং পাবেন। 9 এরও কম IE তাদের মূলত স্টাইল করবে!

এটি নিয়ে উদ্বেগের কারণ হ'ল সেখানে থাকা বাকি সমস্ত এক্সপি ব্যবহারকারী যারা আই 8-র উপরে আপগ্রেড করতে পারবেন না।

উদাহরণস্বরূপ, আমার কাছে টেবিলগুলির একটি গোষ্ঠী রয়েছে যেখানে লিখিত সামগ্রীটি প্রান্ত থেকে প্রান্তে স্থানান্তরিত হতে পারে, 1 বা 7 কোষ থেকে কোথাও ফাঁকা রেখে শেষ বা শুরুতে ফাঁকা রাখতে পারে।

আমি কলস্পান অ্যাট্রিবিউটটি ব্যবহার করে শেষে বা শুরুতে কোনও ফাঁকা ঘরগুলিতে একটি রঙ প্রয়োগ করতে চাই। নিম্নলিখিত ব্যবহার করে 9 এর চেয়ে কম IE এ কাজ করবে না

#my td[colspan] {background-color:blue;}

... সমস্ত টিডি স্টাইলযুক্ত হয়ে উঠবে (শর্তসাপেক্ষে শর্তযুক্ত বৈশিষ্ট্য স্টাইলিং IE এর চেয়ে উচ্চতর ছিল, তবে আমি ডিগ্রেশন করি ...)।

সমস্ত ব্রাউজারগুলিতে নিম্নলিখিত কাজগুলি ব্যবহার করে যখন আমি স্টাইলিং স্কিমটিতে অন্তর্ভুক্ত করতে চাই এমন কোনও একক সেল / টিডির জন্য কলস্পানের মানটি 'একক' তে সেট করি তবে এটি একটি 'হ্যাক' এবং সঠিকভাবে বৈধ হবে না ...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

বিকল্পভাবে আপনার ওভাররাইড করতে "if lt IE 9" ব্যবহার করে শর্তসাপেক্ষ স্টাইলিং ব্যবহার করে সমস্যাটিকে আরও যথাযথভাবে সমাধান করতে সক্ষম হওয়া উচিত। এটি করার সঠিক উপায় হবে, কেবল মনে রাখবেন আপনাকে অবশ্যই প্রক্রিয়াতে আইল্ট 9 থেকে "সঠিকভাবে নির্মিত সিএসএস" লুকিয়ে রাখতে হবে, এবং আমি মনে করি এটি করার একমাত্র সঠিক উপায়টি নির্বাচনী স্টাইল শীটগুলি সহ is

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

(বিটিডব্লু, কলস্পান কেবল CSS স্পেসিফিকেশনে এখনও নেই [সিএসএস 3 হিসাবে], সুতরাং এই উদাহরণটি কোনও বৈধতা ত্রুটি নিক্ষেপ করে না))