마지막으로 CSS 변경

마지막으로 CSS 변경

---

CSS를 li사용하여 목록 에서 마지막 에 대한 CSS 속성을 변경하는 방법이 있는지 궁금합니다 . 을 (를) 사용하는 것을 살펴 보았지만 :last-child이것은 정말 버그가있는 것 같고 저에게 작동하지 않습니다. 필요한 경우 JavaScript를 사용하여이 작업을 수행 할 것이지만 CSS에서 솔루션을 생각할 수있는 사람이 있는지 알고 싶습니다.

---

:last-childHTML을 수정하지 않고 할 수있는 유일한 방법입니다.하지만 그렇게 할 수 있다고 가정 할 때 주요 옵션은를 제공 class="last-item"한 다음 다음을 수행하는 것입니다.

li.last-item { /* ... */ }

분명히 선택한 동적 페이지 생성 언어로이를 자동화 할 수 있습니다. 또한 lastChildW3C DOM 에는 JavaScript 속성이 있습니다.

다음은 Prototype 에서 원하는 작업을 수행하는 예입니다 .

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

또는 더 간단하게 :

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

jQuery 에서는 더 간결하게 작성할 수 있습니다.

$("ul li:last-child").addClass("last-item");

또한 이것은 실제 CSS 선택기 를 사용하지 않고 작동 해야 합니다. last-child오히려 JavaScript 구현이 사용되므로 브라우저에서 버그가 적고 더 안정적이어야합니다.

---

나는 순수한 CSS로 이것을했다 (아마도 내가 미래에서 왔기 때문에-다른 사람들보다 3 년 늦게 : P)

목록이 있다고 가정합니다.

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

그런 다음 다음을 사용하여 마지막 항목의 텍스트를 쉽게 빨간색으로 만들 수 있습니다.

ul#nav li:last-child span {
   color: Red;
}

---

필자는 일반적으로 CSS와 JavaScript 접근 방식을 결합하여 모든 브라우저에서 JavaScript없이 작동하도록합니다. IE6 / 7을 제외한 모든 브라우저에서, IE6 / 7에서는 JavaScript가 켜져 있지만 (끄지 않음) :last-child의사 클래스를 지원하지 않기 때문에 작동 합니다.

$("li:last-child").addClass("last-child");

li:last-child,li.last-child{ /* ... */ }

---

jQuery를 사용할 수 있으며 그렇게 할 수 있습니다.

$("li:last-child").addClass("someClass");

---

IE7 + 및 기타 브라우저에 대한 한 가지 대안은 :first-child대신 사용 하고 스타일을 반전하는 것입니다.

예를 들어 각각의 여백을 설정하는 경우 li:

ul li {
  margin-bottom: 1em;
}
ul li:last-child {
  margin-bottom: 0;
}

다음과 같이 바꿀 수 있습니다.

ul li {
  margin-top: 1em;
}
ul li:first-child {
  margin-top: 0;
}

이것은 테두리와 같은 다른 경우에 잘 작동합니다.

에 따르면 sitepoint , :first-child그것은 어떤 루트 요소합니다 (문서 타입 또는 HTML)을 선택합니다 및 기타 요소를 삽입하는 경우 스타일을 변경할 수 있음 버그가 있지만 범위.

---

2015 답변 : CSS last-of-type을 사용하면 마지막 항목의 스타일을 지정할 수 있습니다.

ul li:last-of-type { color: red; }

---

일반적으로 htc 파일 (예 : last-child.htc)을 생성하여이 작업을 수행합니다.

<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>

내 IE 조건부 CSS 파일에서 다음과 같이 호출하십시오.

ul { behavior: url("/javascripts/htc/last-child.htc"); }

내 주요 CSS 파일에는 다음이 있습니다.

ul li:last-child,
ul li.last-child {
  /* some code */
}

Another solution (albeit slower) that uses your existent css markup without defining any .last-child class would be Dean Edwards ie7.js library.

---

:last-child is CSS3 and has no IE support while :first-child is CSS2, I believe the following is the safe way to implement it using jquery

$('li').last().addClass('someClass');

---

$('li').last().addClass('someClass');

if you have multiple

group it will only select the last li.

---

If you know there are three li's in the list you're looking at, for example, you could do this:

li + li + li { /* Selects third to last li */
}

In IE6 you can use expressions:

li {
    color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}

I would recommend using a specialized class or Javascript (not IE6 expressions), though, until the :last-child selector gets better support.

참고URL : https://stackoverflow.com/questions/1329841/changing-css-for-last-li