한 요소에 두 개의 CSS 클래스 사용하기

한 요소에 두 개의 CSS 클래스 사용하기

---

이 질문에는 이미 답변이 있습니다.

• 단일 요소에 두 개의 CSS 클래스를 적용하는 방법 7 답변

내가 여기서 뭘 잘못하고 있니?

나는을 가지고 .social div있지만 첫 번째에는 맨 위에 패딩을 원하지 않고 두 번째에는 아래쪽 테두리를 원하지 않습니다.

나는 이것을 처음과 마지막에 클래스를 만들려고했지만 어딘가에 잘못했다고 생각합니다.

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}

.social .first{padding-top:0;}

.social .last{border:0;}

그리고 HTML

<div class="social" class="first">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

두 개의 다른 수업을 가질 수 없다고 생각합니다. 그렇다면 어떻게해야합니까?

---

하나의 요소에 두 개의 클래스를 원하면 다음과 같이하십시오.

<div class="social first"></div>

CSS에서 다음과 같이 참조하십시오.

.social.first {}

예:

https://jsfiddle.net/tybro0103/covbtpaq/

---

당신은 이것을 시도 할 수 있습니다 :

HTML

<div class="social">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

CSS 코드

.social {
  width:330px;
  height:75px;
  float:right;
  text-align:left;
  padding:10px 0;
  border-bottom:dotted 1px #6d6d6d;
}
.social .socialIcon{
  padding-top:0;
}
.social .socialText{
  border:0;
}

동일한 요소에 여러 클래스를 추가하려면 다음 형식을 사용할 수 있습니다.

<div class="class1 class2 class3"></div>

데모

---

두 개의 항목 만있는 경우 다음을 수행 할 수 있습니다.

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border: none;
}

.social:first-child { 
    padding-top:0;
    border-bottom: dotted 1px #6d6d6d;
}

---

각 클래스를 클래스 속성 내에 공백으로 분리하여 요소에 여러 클래스를 적용 할 수 있습니다. 예를 들면 다음과 같습니다.

<img class="class1 class2">

---

부모의 첫 번째 자식 인 요소에만 스타일을 적용하려면 :first-child의사 클래스 를 사용하는 것이 좋습니다

.social:first-child{
    border-bottom: dotted 1px #6d6d6d;
    padding-top: 0;
}
.social{
    border: 0;
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
}

그런 다음 규칙 .social에는 공통 스타일과 마지막 요소의 스타일이 모두 있습니다.

그리고 .social:first-child첫 번째 요소의 스타일로보다 우선합니다.

:last-child선택기 를 사용할 수도 있지만 :first-child이전 브라우저에서 더 많은 지원을받습니다 : https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility 및 https://developer.mozilla.org/ ES / 문서 / CSS / : 마지막으로 아이 #의 Browser_compatibility .

---

이 게시물이 오래되었다는 것을 알고 있지만 여기에 그들이 요청한 내용이 있습니다. 스타일 시트에서 :

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}
[class~="first"] {
    padding-top:0;
}
[class~="last"] {
    border:0;
}

그러나 선택기를 사용하는 것은 나쁜 방법 일 수 있습니다. 또한 여러 개의 "첫 번째"확장자가 필요한 경우 다른 이름을 설정하거나 선택기를 세분화해야합니다.

[class="social first"] {...}

나는 이것이 누군가를 도울 수 있기를 희망하며, 어떤 상황에서는 매우 유용 할 수 있습니다.

예를 들어, 많은 다른 구성 요소에 연결 해야하는 작은 CSS 조각이 있고 동일한 코드를 백 번 작성하지 않으려는 경우.

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

div.myClass1.red {color:red;}
div.myClass2.red {color:red;}
...
div.myClassN.red {color:red;}

된다 :

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

[class~=red] {color:red;}

---

만약 당신이 2 개의 클래스를 가지고 있다면 , .indent그리고 작동합니다..fontclass="indent font"

당신은 .indent.font{}CSS 를 가질 필요가 없습니다 .

CSS로 클래스를 분리 class="class1 class2"하고 html에서를 사용하여 둘 다 호출 할 수 있습니다 . 하나 이상의 클래스 이름 사이에 공백이 필요합니다.

---

다른 옵션은 하위 선택기 를 사용하는 것입니다

HTML :

<div class="social">
<p class="first">burrito</p>
<p class="last">chimichanga</p>
</div>

CSS에서 첫 번째 참조 : .social .first { color: blue; }

CSS에서 마지막 참조 : .social .last { color: green; }

JSfiddle : https://jsfiddle.net/covbtpaq/153/

---

여러 CSS 클래스를 사용하는 대신 근본적인 문제를 해결하기 위해 :focus의사 선택기를 사용할 수 있습니다 .

input[type="text"] {
   border: 1px solid grey;
   width: 40%;
   height: 30px;
   border-radius: 0;
}
input[type="text"]:focus {
   border: 1px solid #5acdff;
}

참고 URL : https://stackoverflow.com/questions/11918491/using-two-css-classes-on-one-element