This week's book giveaway is in the Cloud forum.
We're giving away four copies of Terraform in Action and have Scott Winkler on-line!
See this thread for details.
Win a copy of Terraform in Action this week in the Cloud forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Rob Spoor
  • Bear Bibeault
Saloon Keepers:
  • Jesse Silverman
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Al Hobbs
  • salvin francis

Two spans, different styling

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello,
I'd want to style spans without changing html. How do I do it in css?

Here is the code:
<div class="contact">
       <span class="name">Jan Kowalski</span>
       <div class="info">
         <span class="address">
           <span>ul. Malinowa 12</span>
           <span>80-112 Suwalki</span>
         </span>
         <span class="mail">j.kowalski@example.pl</span>
         <span class="phone">tel. 516 654 566</span>
       </div>
     </div>

I'd want to make "ul. Malinowa 12" and the email green but the rest id want to leave black but make "80-112 Suwalki" bigger font.
Thanks in advance
 
Marshal
Posts: 26914
82
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Welcome to the Ranch!

If you want to style two different <span> types with CSS then the most straightforward way would be to assign different classes to them (just like you have done elsewhere in that HTML). For example:

 
Aneta Grochowska
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Paul Clapham wrote:Welcome to the Ranch!

If you want to style two different <span> types with CSS then the most straightforward way would be to assign different classes to them (just like you have done elsewhere in that HTML). For example:



Thank you but the task is actually not to change html. Thats what got me stuck so I would want to know how to do it in CSS.
 
Sheriff
Posts: 67601
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you cannot change the HTML at all for whatever reason, you can leverage the "address" classname that is already present with the nth-child CSS selector.
 
Paul Clapham
Marshal
Posts: 26914
82
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
... as long as you are certain that the "address" will always contain a street-name span and a city span, in that order, with no other extraordinary spans included.
 
Bear Bibeault
Sheriff
Posts: 67601
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Exactly. Using positional selectors is dicey as it depends upon the HTML structure remaining static. Using specific classnames for each element works best as the selectors are independent of the HTML structure.
 
You showed up just in time for the waffles! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic