Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the correct terminology for this kind of CSS declaration ".myClass div"?

What is the correct terminology when referring to a CSS declaration containing CSS combinators, such as:

.myClass div { ... }

Here I'm using a declaration which will apply styles to all div elements inside an element with the class myClass.

But that is irrelevant. I'm interested in knowing the correct terminology for a declaration which mentions parent selectors.

But what is the correct terminology for this sort of declaration?

like image 633
Curtis Avatar asked Dec 28 '22 03:12

Curtis


2 Answers

They're called descendant selectors:

http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

like image 126
mamoo Avatar answered Apr 09 '23 03:04

mamoo


They are called Descendant Selectors, see here for more information and other terms

Just in case the W3 site ever goes down ;) here are the important parts:

At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element").

Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.


Example (also quoted from the site linked above):

For example, consider the following rules:

h1 { color: red }
em { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>

We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:

h1 { color: red }
em { color: red }
h1 em { color: blue }
like image 39
musefan Avatar answered Apr 09 '23 04:04

musefan