Styjun

Supervisor wants me to support a diploma-thesis SW tool after I graduated

How does a changeling's Divergent Persona affect bard spells cast using musical instruments?

How do you say "to hell with everything" in French?

When does order matter in probability?

How can faith be maintained in a world of living gods?

The Green Glass Door, Revisited

Why can't some airports handle heavy aircraft while others do it easily (same runway length)?

I multiply the source, you (probably) multiply the output!

How can Schrödinger's cat be both dead and alive?

Friend is very nitpicky about side comments I don't intend to be taken too seriously

Are professors obligated to accept supervisory role? If not, how does it work?

Can you pop microwave popcorn on a stove?

Is future tense in English really a myth?

Is there a way to deal with desistance in a off-chain game?

Owner keeps cutting corners and poaching workers for his other company

Methods and Feasibility of Antimatter Mining?

Infinitely many primes

How strong is aircraft-grade spruce?

antimatter annihilation in stars

How do Scrum teams manage their dependencies on other teams?

How should Thaumaturgy's "three times as loud as normal" be interpreted?

2 load centers under 1 meter: do you need bonding and main breakers at both?

The pirate treasure of Leatherback Atoll

Word for something that used to be popular but not anymore

How to select last child of tspecific class in css [duplicate]

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?How to horizontally center a <div>?How to change an element's class with JavaScript?How do I give text or an image a transparent background using CSS?How to disable text selection highlightingIs there a CSS parent selector?Change an HTML5 input's placeholder color with CSSCSS selector for first element with classHow to disable resizable property of textarea?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

-1

This question already has an answer here:

• 
  Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  
  5 answers
  
  

Need to apply CSS to div with class name test except last div having class test.

in below case -
first 2 div.test should have margin but 3rd div.test should not.

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph</div>
</div>

div.test-1 should not apply anything

html css

share|improve this question

edited Mar 28 at 7:54

Usman Maqbool

2,26377 gold badges2222 silver badges3535 bronze badges

asked Mar 28 at 7:17

VishuVishu

47033 gold badges77 silver badges1515 bronze badges

marked as duplicate by Paulie_D css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 28 at 11:20

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By index of child:w3schools.com/cssref/sel_nth-child.asp
  
  – לבני מלכה
  Mar 28 at 7:18
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By last child:w3schools.com/csSref/sel_last-child.asp
  
  – לבני מלכה
  Mar 28 at 7:18
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  :last-of-type
  
  – Pranav C Balan
  Mar 28 at 7:19
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By particular type:w3schools.com/csSref/sel_nth-of-type.asp
  
  – לבני מלכה
  Mar 28 at 7:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  nth-child will not work for me, no of elements are flexible. its just need to select last div.test no matter how may div.test are there. :last-of-type will not work with class(only works with element)
  
  – Vishu
  Mar 28 at 7:25
  

  
  
  
  

add a comment | 

-1

This question already has an answer here:

• 
  Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  
  5 answers
  
  

Need to apply CSS to div with class name test except last div having class test.

in below case -
first 2 div.test should have margin but 3rd div.test should not.

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph</div>
</div>

div.test-1 should not apply anything

html css

share|improve this question

edited Mar 28 at 7:54

Usman Maqbool

2,26377 gold badges2222 silver badges3535 bronze badges

asked Mar 28 at 7:17

VishuVishu

47033 gold badges77 silver badges1515 bronze badges

marked as duplicate by Paulie_D css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Mar 28 at 11:20

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By index of child:w3schools.com/cssref/sel_nth-child.asp
  
  – לבני מלכה
  Mar 28 at 7:18
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By last child:w3schools.com/csSref/sel_last-child.asp
  
  – לבני מלכה
  Mar 28 at 7:18
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  :last-of-type
  
  – Pranav C Balan
  Mar 28 at 7:19
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By particular type:w3schools.com/csSref/sel_nth-of-type.asp
  
  – לבני מלכה
  Mar 28 at 7:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  nth-child will not work for me, no of elements are flexible. its just need to select last div.test no matter how may div.test are there. :last-of-type will not work with class(only works with element)
  
  – Vishu
  Mar 28 at 7:25
  

  
  
  
  

add a comment | 

This question already has an answer here:

• 
  Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  
  5 answers
  
  

Need to apply CSS to div with class name test except last div having class test.

in below case -
first 2 div.test should have margin but 3rd div.test should not.

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph</div>
</div>

div.test-1 should not apply anything

html css

share|improve this question

edited Mar 28 at 7:54

Usman Maqbool

2,26377 gold badges2222 silver badges3535 bronze badges

asked Mar 28 at 7:17

VishuVishu

47033 gold badges77 silver badges1515 bronze badges

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph</div>
</div>

share|improve this question

edited Mar 28 at 7:54

Usman Maqbool

2,26377 gold badges2222 silver badges3535 bronze badges

asked Mar 28 at 7:17

VishuVishu

47033 gold badges77 silver badges1515 bronze badges

share|improve this question

edited Mar 28 at 7:54

Usman Maqbool

2,26377 gold badges2222 silver badges3535 bronze badges

asked Mar 28 at 7:17

VishuVishu

47033 gold badges77 silver badges1515 bronze badges

edited Mar 28 at 7:54

Usman Maqbool

2,26377 gold badges2222 silver badges3535 bronze badges

edited Mar 28 at 7:54

Usman Maqbool

2,26377 gold badges2222 silver badges3535 bronze badges

asked Mar 28 at 7:17

VishuVishu

47033 gold badges77 silver badges1515 bronze badges

asked Mar 28 at 7:17

VishuVishu

47033 gold badges77 silver badges1515 bronze badges

3 Answers
3

active

oldest

votes

1

Use .test:nth-last-child(-n+2) to select the last child of .test

.test:nth-last-child(-n+2)
color:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The fourth paragraph.</div>
</div>

share|improve this answer

answered Mar 28 at 7:32

לבני מלכהלבני מלכה

12k11 gold badge1111 silver badges3030 bronze badges

add a comment | 

-1

Try This

Example using a suggestion from @ לבני מלכה

.parent .test:not(:nth-child(4)) 
 background:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 7:53

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:46

Syed FurqanSyed Furqan

1055 bronze badges

add a comment | 

-1

To select specific child, you can use nth-child(number) property:

 div:nth-child(2) 
 color:red
 

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 10:59

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:34

JiyaJiya

144 bronze badges

add a comment | 

1

Use .test:nth-last-child(-n+2) to select the last child of .test

.test:nth-last-child(-n+2)
color:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The fourth paragraph.</div>
</div>

share|improve this answer

answered Mar 28 at 7:32

לבני מלכהלבני מלכה

12k11 gold badge1111 silver badges3030 bronze badges

add a comment | 

1

Use .test:nth-last-child(-n+2) to select the last child of .test

.test:nth-last-child(-n+2)
color:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The fourth paragraph.</div>
</div>

share|improve this answer

answered Mar 28 at 7:32

לבני מלכהלבני מלכה

12k11 gold badge1111 silver badges3030 bronze badges

add a comment | 

Use .test:nth-last-child(-n+2) to select the last child of .test

.test:nth-last-child(-n+2)
color:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The fourth paragraph.</div>
</div>

share|improve this answer

answered Mar 28 at 7:32

לבני מלכהלבני מלכה

12k11 gold badge1111 silver badges3030 bronze badges

.test:nth-last-child(-n+2)
color:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The fourth paragraph.</div>
</div>

.test:nth-last-child(-n+2)
color:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The fourth paragraph.</div>
</div>

.test:nth-last-child(-n+2)
color:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The fourth paragraph.</div>
</div>

share|improve this answer

answered Mar 28 at 7:32

לבני מלכהלבני מלכה

12k11 gold badge1111 silver badges3030 bronze badges

answered Mar 28 at 7:32

לבני מלכהלבני מלכה

12k11 gold badge1111 silver badges3030 bronze badges

answered Mar 28 at 7:32

לבני מלכהלבני מלכה

12k11 gold badge1111 silver badges3030 bronze badges

-1

Try This

Example using a suggestion from @ לבני מלכה

.parent .test:not(:nth-child(4)) 
 background:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 7:53

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:46

Syed FurqanSyed Furqan

1055 bronze badges

add a comment | 

-1

Try This

Example using a suggestion from @ לבני מלכה

.parent .test:not(:nth-child(4)) 
 background:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 7:53

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:46

Syed FurqanSyed Furqan

1055 bronze badges

add a comment | 

Try This

Example using a suggestion from @ לבני מלכה

.parent .test:not(:nth-child(4)) 
 background:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 7:53

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:46

Syed FurqanSyed Furqan

1055 bronze badges

.parent .test:not(:nth-child(4)) 
 background:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

.parent .test:not(:nth-child(4)) 
 background:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

.parent .test:not(:nth-child(4)) 
 background:red;

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 7:53

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:46

Syed FurqanSyed Furqan

1055 bronze badges

edited Mar 28 at 7:53

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

edited Mar 28 at 7:53

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:46

Syed FurqanSyed Furqan

1055 bronze badges

answered Mar 28 at 7:46

Syed FurqanSyed Furqan

1055 bronze badges

-1

To select specific child, you can use nth-child(number) property:

 div:nth-child(2) 
 color:red
 

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 10:59

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:34

JiyaJiya

144 bronze badges

add a comment | 

-1

To select specific child, you can use nth-child(number) property:

 div:nth-child(2) 
 color:red
 

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 10:59

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:34

JiyaJiya

144 bronze badges

add a comment | 

To select specific child, you can use nth-child(number) property:

 div:nth-child(2) 
 color:red
 

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 10:59

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:34

JiyaJiya

144 bronze badges

 div:nth-child(2) 
 color:red
 

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

 div:nth-child(2) 
 color:red
 

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

 div:nth-child(2) 
 color:red
 

<div class="parent">
 <div class="test">
 <div>The first paragraph.</div>
 </div>
 <div class="test">The second paragraph.</div>
 <div class="test">The third paragraph.</div>
 <div class="test">The fourth paragraph.</div>
 <div class="test-1">The firth paragraph.</div>
</div>

share|improve this answer

edited Mar 28 at 10:59

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:34

JiyaJiya

144 bronze badges

edited Mar 28 at 10:59

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

edited Mar 28 at 10:59

Mister Jojo

2,53422 gold badges22 silver badges2222 bronze badges

answered Mar 28 at 7:34

JiyaJiya

144 bronze badges

answered Mar 28 at 7:34

JiyaJiya

144 bronze badges