Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.5k views
in Technique[技术] by (71.8m points)

css selectors - CSS - Different Style on first class element of a page

I′m trying to do something similar to this: https://stackoverflow.com/a/8539107/1743291

I want to give the first element of a class a different style from the other elements using the same class.

So I created something like this following the workaround from the post above:

.kn-menu > .control.has-addons {
border: 1px solid red;}

.kn-menu > .control.has-addons ~ .control.has-addons {
border: none;}

But this is not working for me.

Can anyone tell me what is wrong with my approuch?

Thanks!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can use the first-of-type pseudo class:

  .test {
    width: 200px;
    height: 100px;
    margin: 10px;
    background-color: green;
  }
  .test:first-of-type{
    background-color: red;
  }
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...