What sets apart a .class element from element.class in CSS?

Question

What sets apart a .class element from element.class in CSS?

I was browsing through this tutorial http://www.w3schools.com/css/tryit.asp?filename=trycss_nesting and noticed a confusing point. Why did they use .marked p instead of p.marked? When I tried changing it to p.marked, the text didn't turn white as expected.

I also went through some previous posts like what is the difference between ".class element" and "element.class"?, but the explanations were filled with terminology that I couldn't grasp, such as children and descendants.

If someone could provide a simple example to explain how these concepts work, that would be greatly appreciated. Thank you.

html css

Answer 1

Answer №1

It's actually quite straightforward.

Here is a snippet of HTML code

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

The first kind is element.class

For example:

div.wrapper{
  background: green;/*This will set the background color for the div WITH the class "WRAPPER"*/
}

The second type is .class element

For example:

.wrapper div{
  background: yellow;/*This will set the background color for the div INSIDE the WRAPPER class*/
}

Answer 2

It's actually quite straightforward.

Here is a snippet of HTML code

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

The first kind is element.class

For example:

div.wrapper{
  background: green;/*This will set the background color for the div WITH the class "WRAPPER"*/
}

The second type is .class element

For example:

.wrapper div{
  background: yellow;/*This will set the background color for the div INSIDE the WRAPPER class*/
}

Answer 3

Answer №2

To gain a better understanding of CSS selectors, it's important to familiarize yourself with some fundamental rules. Here are a few examples:

.foo --> targets all elements with the class name foo
#foo --> selects an element with the ID of foo
p.foo --> specifies all paragraph elements with the class foo
p#foo --> identifies a paragraph element with the ID of foo
.foo p --> styles all paragraph elements that are descendants within elements with the class foo
and the list goes on...

Answer 4

To gain a better understanding of CSS selectors, it's important to familiarize yourself with some fundamental rules. Here are a few examples:

.foo --> targets all elements with the class name foo
#foo --> selects an element with the ID of foo
p.foo --> specifies all paragraph elements with the class foo
p#foo --> identifies a paragraph element with the ID of foo
.foo p --> styles all paragraph elements that are descendants within elements with the class foo
and the list goes on...

Answer 5

Answer №3

element.class assigns the attribute directly to the element, whereas .class element applies it to elements within the specified class.

In simpler terms, if you use element.class and write <element class="class" />, the defined CSS will affect that specific element. Conversely, with .class element and the following structure:

<element class="class">
<element />
</element>

the CSS rules will target the element nested inside.

Answer 6

element.class assigns the attribute directly to the element, whereas .class element applies it to elements within the specified class.

In simpler terms, if you use element.class and write <element class="class" />, the defined CSS will affect that specific element. Conversely, with .class element and the following structure:

<element class="class">
<element />
</element>

the CSS rules will target the element nested inside.

Answer 7

Answer №4

One important distinction to note is that using the .class selector assigns the property to all elements regardless of their type, such as div, span, p, etc.

On the other hand, when using the element.class selector, the property is only applied to that specific element.

Answer 8

One important distinction to note is that using the .class selector assigns the property to all elements regardless of their type, such as div, span, p, etc.

On the other hand, when using the element.class selector, the property is only applied to that specific element.

Answer 9

Answer №5

Whenever you use the syntax .class elementname, you are specifically directing your code to target the element name within the designated class tag. For example, if you have ".test p", your corresponding HTML code would look like this:


<div class="test">Happened<p>Something</p></div>

On the other hand, when you write element .class, you are indicating that you want to focus on the element with the specified class present inside the parent element's tag. So, for the selector "p .test", your HTML code should be:

<p>Something, <div class="test">Happened</div></p>

Answer 10

Whenever you use the syntax .class elementname, you are specifically directing your code to target the element name within the designated class tag. For example, if you have ".test p", your corresponding HTML code would look like this:


<div class="test">Happened<p>Something</p></div>

On the other hand, when you write element .class, you are indicating that you want to focus on the element with the specified class present inside the parent element's tag. So, for the selector "p .test", your HTML code should be:

<p>Something, <div class="test">Happened</div></p>

What sets apart a .class element from element.class in CSS?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Placing the navigation bar on the right side of the section

If one sibling requires flexing, apply flex to all siblings

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

Prevent the Spread of an Event for a Particular Controller

Position a button freely on the grid layout of bootstrap4

What is the best way to insert a vertical column separator in a Material-UI table?

Displaying directory contents with JavaScript XHR

Modify content or display picture within accordion panel based on its identifier

Encountering an error while submitting form via Ajax to PHP backend

Tips for creating a responsive navbar image alongside your navbar

Discover the best way for child components to utilize parent components' methods in VueJs

Is there a way to alter the appearance of an HTML element without an ID using a JavaScript function?

Transforming an HTML jQuery contact form into an ASP.NET solution

Can we convert a PHP frontend into a Vue node?

A guide to creating smiley emojis using solely HTML and CSS

MD-List Equilibrium Elevation

I am encountering challenges with submitting the form

Embedded HTML code within a table cell

Issues arise when a questionnaire is duplicated

Item on the menu has been pushed lower in the list