.panel-heading [data-toggle="collapse"]:after

{

font-family: 'Glyphicons Halflings';

content: "\e072";

float: right;

color: #b0c5d8;

font-size: 18px;

line-height: 22px;

-webkit-transform: rotate(-90deg);

-moz-transform:    rotate(-90deg);

-ms-transform:     rotate(-90deg);

-o-transform:      rotate(-90deg);

transform:         rotate(-90deg);

}

.panel-heading [data-toggle="collapse"].collapsed:after

{

-webkit-transform: rotate(90deg);

-moz-transform:    rotate(90deg);

-ms-transform:     rotate(90deg);

-o-transform:      rotate(90deg);                               

transform:         rotate(90deg);

}

제가 요새 이코드를 보고있습니다

이게 아코디언(collapse) 뷰에서 옆에다가 화살표를 표시해주는건데요

http://codepen.io/anon/pen/VYobER

이런식으로요

이게 보면

.panel-heading [data-toggle="collapse"]

여기서 panel-heading 이랑 [data-toggle]랑 띄어져 있는데요

제가 css선택자 찾아보니까 다 붙여서 쓰게되면 클래스가 panel-heading 인것 중에 datatoggle이 collapse인거를 찾아서 적용시키라는 의미로 알고있었는데요

이게 띄어쓰게되면 어떤의미인지 잘 모르겠어서 질문드립니다.

감사합니다