اذهب إلى المحتوى
  • 0

كيف يمكن تحديد كامل العناصر معدا العنصر الأخير في css ؟

zzzzzi

السؤال

Recommended Posts

  • 0

يمكنك الاستعانة بالمحدد الزائف not: 

div a:not(:last-child) {  
   
   opacity: 0.3;
   
}

يحدد هذا كامل العناصر a داخل العنصر div باستثناء العنصر الأخير.

اعرف اكثر عن المحددات (Selectors) في CSS

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 دقائق مضت قال zzzzzi:

كيف يتم كتابة ذلك بالجافا سكريبت

div a:not(:last-child) {

استعمل querySelectorAll ومرر ذات المحدد مباشرة:

var allButLastOne = document.querySelectorAll('div a:not(:last-child)');

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

لا يتضح من خلال الصورة المرفقة إذا كنت تقصد أن div-a هو إسم صنف  أم تقصد شيء أخر. بكل الأحوال سأعطيك مثال يجيب على سؤالك. 

هناك طريقتين لأنجاز الأمر بإستعمال الأصناف المزيفة css-pesudo-classes إما nth-last-child أو not(:last-child) وفيما يلي مثال بالطريقتين.

	<!-- HTML CODE -->
	...
	<div class="section">
	   <a>One</a>
	   <a>Two</a>
	   <a>Three</a>
	</div>
	...
	/* CSS */
	div.section{ /* تعريف شكل الحاوية وضبطها لتعرض عناصرها بشكل عمودي
	    background-color: blue; /* لون الخلفية */
	    display: flex;         /* طريقة العرض */
	    flex-direction: column; /* إتجاه العرض عمودي*/
	}
	/*  الطريقة الأولى*/
	div.section a { /* تعريف العنصر a */
	    color:#fff  /* تحديد اللون */
	    opacity: .5; /* جميع العناصر: تعيين قيمة الشفافية*/
	}
	div.section a:nth-last-child(0n+1){
	    /* يحل هذا التعريف المشكلة حيث يستهدف أخر عنصر في الحاوية*/
	    opacity: 1; /* العنصر الأخير: تعيين قيمة الشفافية*/
	}
	/* الطريقة الثانية*/
	/* يمكنك تحقيق نفس النتيجةأعلاه بتطبيق الطريقة إدناه */
	div.section a { /* تعريف العنصر a */
	        color:#fff  /* تحديد اللون */
	}
	div.section a:not(:last-child) {
	    /* تعريف يستهدف جميع العناصر في الحاوية دون العنصر الأخير */
	    opacity: .5; /*  تعيين قيمة الشفافية*/
	}
	...
	
تم التعديل في بواسطة علي محسن
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...