Below is the structure of the search results:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="person-detail" style="padding:10px 5px 0;"> | |
| <div> | |
| <div class="pre-wrapper"> | |
| <span class="tax-person_hprefix">Dr.</span> | |
| </div> | |
| <span class="person-name">Kathy</span> | |
| <span class="person-last-name">Chase</span> | |
| </div> | |
| <div class="ent-person-type">Faculty</div> | |
| <div class="tax-wrapper persontitle"> | |
| <div class="tax-persontitle small">Professor of Entrepreneurship</div> | |
| </div> | |
| <div class="tax-wrapper personarea"> | |
| <div class="tax-personarea small">Economics</div> | |
| <div class="tax-personarea small">Finance and Accounting</div> | |
| </div> | |
| </div> |
We’ll apply CSS rules that target different elements and change their colors.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Change prefix color */ | |
| .tax-person_hprefix { | |
| color: blue; | |
| } | |
| /* Make first name green */ | |
| .person-name { | |
| color: green; | |
| } | |
| /* Make last name red */ | |
| .person-last-name { | |
| color: red; | |
| } | |
| /* Make "Faculty" gray with bold */ | |
| .ent-person-type { | |
| color: gray; | |
| font-weight: bold; | |
| } | |
| /* Change all person areas to purple */ | |
| .personarea .tax-personarea { | |
| color: purple; | |
| } |
What this does:
- Dr. → Blue
- Kathy → Green
- Chase → Red
- Faculty → Gray, bold
- Economics, Finance and Accounting → Purple