Question 44763 in Html Question posted in
Some basic documentation can be found here.

How do I select more than one element from a class in CSS – Html

How do I select more than one element from my HTML that belongs in the same class?
I want to select the h3 element aswell as the paragraph element from the same single class.

I tried doing it like this, but it seems to just make every paragraph on the page get selected

.skill-row {
  width      : 50%;
  margin     : 100px auto 100px auto;
  text-align : center;
  }
.skill-row h3,p  {
  text-align : left;
}
<div class="skill-row">
  <img class="" src="./images/computer.png" alt="Picture of a computer">
  <h3>Lorem & Ipsum</h3>
  <p>
    Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. 
    Consectetuer vestibulum, nunc urna lectus, erat ligula. 
    Hendrerit nam, lectus ante, ut lorem eros.
  </p>
</div>

Now as you can see from the snippet, this works out great,
BUT! The other paragraph tags on my page get selected aswell and get set to float to the left.
Could someone explain what is happening or what I am doing wrong?
I Just want to select the h3 and p elements from the skill-row class and set there text-align to the left

Tags:

3

Answers


  1. 0

    Try this:

    .skill-row{

    width:50%;
    margin:100px auto 100px auto;
  text-align:center;


}

.skill-row h3, 
.skill-row p {

  text-align:left;

}

    typing only "p" after comma makes that css downloading all paragraphs from your app

    Login or Signup to reply.
  2. 0

    If you want to select specific elements that are inside of other element, you can write something like this :

    .skill-row h3, .skill-row p {

}

    It will select all headings and paragraphs that are inside element with class .skill-row

    If you want to choose only those elements that are direct children of .skill-row, you can use :

    .skill-row > h3, .skill-row > p {
    
}

    If you write something like :

    .skill-row h3, p  {
  text-align : left;
}

    you can see that you are just choosing every paragraph element, that is on your page

    Login or Signup to reply.
  3. 0

    If you want one liners you can try " .skill-row > * ". This will select all direct children (in your case the img too) of a parent that has the skill-row class.

    You can also try adding classes/IDs to the elements in question and just line them up when writing the selectors.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search