CODEWITHSUNDEEP
csscss-selectors
Necktwi
Necktwi

Reputation: 2625

is there a way to select a child element of an element using css

example below should comprehend my question.

<div id="bmw" class="car">
  <div class="seats">4</div>
  <div class="fuel">petrol</div>
</div>
<div id="merc" class="car">
  <div class="seats">2</div>
  <div class="fuel">petrol</div>
</div>

using css can i select seats element of bmw element. i don wanna add extra class tag to child elements of bmw

and how to select seats of all car class elements

<div id="bmw" class="car">
  <div class="seats">4</div>
  <div class="fuel">petrol</div>
</div>
<div id="merc" class="car">
  <div class="seats">2</div>
  <div class="fuel">petrol</div>
</div>
<div id="mazda" class="truck">
  <div class="seats">2</div>
  <div class="fuel">diesel</div>
</div>

and how to select element with both car and seat classes

<div id="godrej" class="car seat">
  <div class="hands">0</div>
</div>

Upvotes: 2

Views: 135

Answers (3)

Gangadhar
Gangadhar

Reputation: 1749

 #bmw .seat{}

.car .seat{}

In the first the rules will apply to all the elements with class seat inside the element with id bmw.

In the second the elements that has both the class car and seat. 

.car.seats{}

This will apply for the element with both in Class="" property

.car .seats{} //with space in between

This will apply for the elements that have parent class as car and child class as seats.

Upvotes: 1

Ahmad Alfy
Ahmad Alfy

Reputation: 13381

This is pretty basic CSS

#bmw .seats {
    /* your rules go here */
}

See, #bmw is an ID selector. .seats is a class selector. If you combined them the way posted it will get all .seats inside #bmw

I think you need to learn more about CSS, this is CSS 101

Update

To select all .seats inside .car simply use

.car .seats {
    /* your rules go here */
}

Upvotes: 5

Randhi Rupesh
Randhi Rupesh

Reputation: 15090

#bmw .seats {
    /* your can specify styles here */
}

you can select any child element of any tag followed by parent element

for which the bmw element styles not applied

you can specify either class or id to apply styles

Upvotes: 1

Related Questions