انتخاب آخرین پاراگراف بین همزادان آن پاراگراف
فرض کنید کد زیر را داریم و ساختار کلی کد رو نمی تونیم عوض کنیم.
در این مثال نمونه، چطوری من می تونم انتخابگر ِ CSS ای درست کنم تا هنگامی که عناصر پاراگراف پشت سر هم قرار گرفتند، آخرین عنصر پاراگراف انتخاب بشه؟ (داخل کدها مواردی که منظورم هستش رو علامت گذاری کردم تا مشخص تر باشه براتون)
<html>
<head>
<style>
/* کدهای مورد نظر رو وارد کنید */
</style>
</head>
<body>
<div class="content">
<div>A div element.</div>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph.</p> <!-- انتخاب بشه -->
<h2>Another list 1</h2>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph.</p> <!-- انتخاب بشه -->
<figure>
<img src="./images/good.jpeg">
</figure>
<h3>Another list 2</h3>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph.</p> <!-- انتخاب بشه -->
<h2>Another list 3</h2>
<p>The first paragraph. The first paragraph.</p> <!-- انتخاب بشه -->
<h2>Another list 4</h2>
</div>
</body>
</html>
پاسخ‌ها
10
H3 > p:last-of-type
يا
P:last-of-type
@arminbeik
ممنونم، ولی پاسختون جواب درستی به سوال من نبودش. اگر امتحان کنید می بینید که پاسخ تون صحیح نیستش.
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
بهتره اونایی که میخوای انتخاب کنی یک کلاس بهشون بده برای این انتخابی که جنابعلی گفتی تا حالا من به این چنین مورد انتخابی برنخوردم که js یا css گفته باشه.
<html>
<head>
<style>
/* کدهای مورد نظر رو وارد کنید */
.para-select{
color:red;
}
</style>
</head>
<body>
<div class="content">
<div>A div element.</div>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p class="para-select">The first paragraph.</p> <!-- انتخاب بشه -->
<h2>Another list 1</h2>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p class="para-select">The first paragraph.</p> <!-- انتخاب بشه -->
<figure>
<img src="./images/good.jpeg">
</figure>
<h3>Another list 2</h3>
<p>The first paragraph. The first paragraph. The first paragraph.</p>
<p class="para-select">The first paragraph.</p> <!-- انتخاب بشه -->
<h2>Another list 3</h2>
<p class="para-select">The first paragraph. The first paragraph.</p> <!-- انتخاب بشه -->
<h2>Another list 4</h2>
</div>
</body>
</html> </body></html>
@milad
@milad
ایده کلی اینه : div content رو میگیرید هر چی توشه بر میدارید ، foreach میکنید و آخرین تگ های p رو جدا میکنید :
var content = document.getElementsByClassName('content')[0].children;
console.log(content)
log رو ببینید و با توجه به اون بخش رو خودتون بنویسید.
@hosseinshirinegad98
ممنونم، این روشی که شما قرار دادین رو متوجه میشم و کامل احاطه دارم بهش.
ولی این سوال من نیستش، شرایط اولیه مسئله این نیست.
من میخوام بصورت خودکار معین کنم که آخرین عنصر p رو انتخاب کنم، نه اینکه خودم دستی برم پیداش کنم.
@forughi.vahid
ممنون از شما، بیشتر ایجاد یک انتخابگر از طریق css مدنظر من هستش و نه از طریق جاوااسکریپت.
اگر راه حل css ای یافت نشه، احتمالا برم سراغ جاوااسکریپت.
البته پاسخ تون اگر کامل تر میشدش بهتر هم میشدش، ممنون از راهکار کلی تون
بهتر بود هر گروه از عناصر p رو داخل یک div قرار می دادین تا راحتر بشه آخرین p رو انتخاب کرد. تو برنامه نویسی باید راحترین راهو پیدا کرد یا ایجادش کرد. این ساختار انتخاب شما فعلا برای من جز این راه که در بالا گفتم جوابی نداری. بهتر سورستونو اگه دلتون خواست عوضش کنید . یا شاید راهی براش باشه.
<style>
div p:last-child
</style>
<div>
<p>para</p>
<p>para</p>
<p>para</p>
</div>@hosseinshirinegad98
سپاسمندم از شما بابت راهکارهایی که ارائه میدین.
متوجه منظورتون هم هستم، و این راه حل را می فهمم.
در عین حال در نظر بگیرید که چنین ساختاری که من نوشتم، یک ساختار متداول محسوب میشه. از برای مثال، شما همین الان به این مقاله راکت نگاهی بندازید:
https://roocket.ir/articles/seo-web-design-process
همانطور که در ساختار HTML آن می بینید، ساختاری مشابه ساختاری هستش که من مطرح کردم.
بنابراین من سعی دارم در ساختار موجود، راهکاری رو پیدا کنم.
سلام
https://roocket.ir/articles/seo-web-design-process در این مقاله در باره SEO صحبت شده و هیچ ساختار HTML من ندیدم.
اگه راحلی برای این مسئله پیدا کردین به من هم اطلاع بدین.@milad
سلام @hosseinshirinegad98
ساختار HTML صفحه رو از طریق ابزار مرورگر (inspect element) می تونید ببینید.
مشابه به مثال من هستش، یعنی همانطور که محتوای مقاله رو ملاحظه می کنید، یک سری پاراگراف داریم که پشت هم تکرار میشن و درین بین عناوین، عکس، ... هم قرار میگیره.
دارم به این نتیجه میرسم که گویا این مسئله راه حل CSS ای نداره.