제이쿼리_선택자예제

by Kim Ara

HTML

<ul>
  <li>
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/2017-Jeep-Renegade-VLP-Key-Features-Limited-18-Inch-Aluminum-Wheels.jpg.image.700.jpg" alt="18-Inch Aluminum Wheels">
    <p class="tit">18-Inch Aluminum Wheels</p>
    <p class="description">Renegade Limited는 18인치 알루미늄 휠과 사계절 타이어를 통해 스타일을 완성합니다.</p>
  </li>
  <li>
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/2017-Jeep-Renegade-VLP-Key-Features-Limited-Heated-Leather-Trimmed-Front-Seats.jpg.image.700.jpg" alt="Heated Leather-Trimmed Front Seats">
    <p class="tit">Heated Leather-Trimmed Front Seats</p>
    <p class="description">추운 겨울날과 장시간 주행 시 앞좌석의 8-방향 조절과 4-방향 럼버서포트가 포함된 열선 가죽시트가 즐거움을 선사할 것입니다.</p>
  </li>
  <li>
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/2017-Jeep-Renegade-VLP-Key-Features-Limited-7-Inch-Full-Color-Personalized-Instrument-Cluster.jpg.image.700.jpg" alt="Driver Information Digital Cluster Display">
    <p class="tit">Driver Information Digital Cluster Display</p>
    <p class="description">7인치 풀-컬러 디지털 클러스터 디스플레이를 통해 원하는 정보를 사용자에게 직관적으로 제공합니다.</p>
  </li>
  <li>
    <img src="//www.jeep.co.kr/17_renegade/images/vlp/Modelizer/limited/2017-Jeep-Renegade-VLP-Key-Features-Limited-Rain-Sensing-Wipers.jpg.image.700.jpg" alt="Rain-Sensing Wipers">
    <p class="tit">Rain-Sensing Wipers</p>
    <p class="description">빗방울이 감지되면 유리에 장착된 센서가 비 강도에 따라 와이퍼 속도를 조정합니다.</p>
  </li>
</ul>

CSS

ul{width:700px}
li{float: left; width: 23%;padding:1%;list-style-type:none}
img{width:100%}

.plus{font-size:15px;font-weight:bold;color:green}

JavaScript

$(document).ready(function(){

	$('li:nth-child(1)').css('background','#ddd');
  $('.tit').addClass('plus');
  $('li:even').css('color','blue');

});