میلاد-م
4 سال پیش توسط میلاد-م مطرح شد
10 پاسخ

انتخاب آخرین پاراگراف بین همزادان آن پاراگراف

فرض کنید کد زیر را داریم و ساختار کلی کد رو نمی تونیم عوض کنیم.
در این مثال نمونه، چطوری من می تونم انتخابگر ِ 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>

ثبت پرسش جدید
آرمین
@arminbeik 4 سال پیش مطرح شد
1

H3 > p:last-of-type
يا
P:last-of-type


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
-1

@arminbeik
ممنونم، ولی پاسختون جواب درستی به سوال من نبودش. اگر امتحان کنید می بینید که پاسخ تون صحیح نیستش.


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش آپدیت شد
1

بهتره اونایی که میخوای انتخاب کنی یک کلاس بهشون بده برای این انتخابی که جنابعلی گفتی تا حالا من به این چنین مورد انتخابی برنخوردم که 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


وحید
تخصص : Fullstack
@forughi.vahid 4 سال پیش مطرح شد
1

@milad
ایده کلی اینه : div content رو میگیرید هر چی توشه بر میدارید ، foreach میکنید و آخرین تگ های p رو جدا میکنید :

var content = document.getElementsByClassName('content')[0].children;
console.log(content)

log رو ببینید و با توجه به اون بخش رو خودتون بنویسید.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
-1

@hosseinshirinegad98
ممنونم، این روشی که شما قرار دادین رو متوجه میشم و کامل احاطه دارم بهش.
ولی این سوال من نیستش، شرایط اولیه مسئله این نیست.

من میخوام بصورت خودکار معین کنم که آخرین عنصر p رو انتخاب کنم، نه اینکه خودم دستی برم پیداش کنم.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
-1

@forughi.vahid
ممنون از شما، بیشتر ایجاد یک انتخابگر از طریق css مدنظر من هستش و نه از طریق جاوااسکریپت.
اگر راه حل css ای یافت نشه، احتمالا برم سراغ جاوااسکریپت.

البته پاسخ تون اگر کامل تر میشدش بهتر هم میشدش، ممنون از راهکار کلی تون


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش مطرح شد
1

بهتر بود هر گروه از عناصر p رو داخل یک div قرار می دادین تا راحتر بشه آخرین p رو انتخاب کرد. تو برنامه نویسی باید راحترین راهو پیدا کرد یا ایجادش کرد. این ساختار انتخاب شما فعلا برای من جز این راه که در بالا گفتم جوابی نداری. بهتر سورستونو اگه دلتون خواست عوضش کنید . یا شاید راهی براش باشه.

<style>
div p:last-child
</style>
<div>
<p>para</p>
<p>para</p>
<p>para</p>
</div>

@milad


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
-1

@hosseinshirinegad98
سپاسمندم از شما بابت راهکارهایی که ارائه میدین.
متوجه منظورتون هم هستم، و این راه حل را می فهمم.

در عین حال در نظر بگیرید که چنین ساختاری که من نوشتم، یک ساختار متداول محسوب میشه. از برای مثال، شما همین الان به این مقاله راکت نگاهی بندازید:
https://roocket.ir/articles/seo-web-design-process
همانطور که در ساختار HTML آن می بینید، ساختاری مشابه ساختاری هستش که من مطرح کردم.
بنابراین من سعی دارم در ساختار موجود، راهکاری رو پیدا کنم.


حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 4 سال پیش آپدیت شد
1

سلام
https://roocket.ir/articles/seo-web-design-process در این مقاله در باره SEO صحبت شده و هیچ ساختار HTML من ندیدم.

اگه راحلی برای این مسئله پیدا کردین به من هم اطلاع بدین.@milad


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
-1

سلام @hosseinshirinegad98
ساختار HTML صفحه رو از طریق ابزار مرورگر (inspect element) می تونید ببینید.
مشابه به مثال من هستش، یعنی همانطور که محتوای مقاله رو ملاحظه می کنید، یک سری پاراگراف داریم که پشت هم تکرار میشن و درین بین عناوین، عکس، ... هم قرار میگیره.

دارم به این نتیجه میرسم که گویا این مسئله راه حل CSS ای نداره.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام