Grouping. CSS selectors - what they are, why they are needed and what they are Basic css selectors

CSS selectors are one of the main features of the CSS language. Selectors allow you to refer to both a group of elements, and to only one of them.

Selectors in CSS

Selectors are used to tell the browser which elements to apply the styles described in curly braces.

P(
Styles…
}

In this case, the selector is p, the paragraph tag. Such a rule will add styles to all paragraphs on the web page.

What are css selectors?

The tag selector is the simplest. It has been shown in an example. To write it in css, you need to write the tag name without angle brackets. The styles will be applied to all elements with that tag.
Table() - styles for all tables
Li() - styles for all list items
A() - styles for all links

Style class You can attach a style class to any element on a web page. Even for one letter. Then, in the css file, you can refer to this element by writing your own styles for it. To do this, put a period and write the name of the style class after it. Examples:
.about() - the rules will be applied to all elements that have the attribute class = "about"
.down() - the rules will be applied to all elements that have the attribute class = "down"
.float() - the rules will be applied to all elements that have the attribute class = "float"

As you can see, the main thing is to put an end to it. A style class can be bound to an unlimited number of elements. An element can have multiple classes.

Identifier is another kind of selector. One identifier can be assigned to only one element. It cannot have two id's, and the id attached to this element cannot be specified anywhere else.

It is set like this:

Paragraph

That is, just like a class, only the attribute is used id any word is used as the value.

To refer to an element with an id through css, you need to write the id value and put a hash in front of it.

#first(
font-size: 22px
}

We refer to the paragraph id = first. The style will apply only to it. The rest of the paragraphs will not change the font size.

What is a selector in css is a description of that element or group of elements, which shows the browser which element to choose to apply style to it. Let's take a look at the basic CSS selectors.

1) .X

.topic-title ( background-color: yellow; )

CSS selector by class X. The difference between an id and a class is that multiple elements on a page can have the same class, and the id is always unique. Classes should be used to apply the same style to multiple elements.

Chrome
Firefox
safari
Opera

2) #X

#content ( width: 960px; margin: 0 auto; )

CSS selector by id. The pound sign in front of the CSS selector X selects the element whose id = X. When styling by id, you should always remember that it must be unique - there should be only one such id on the page. Therefore, it is better to use selectors by class, class combinations or tag names. However, id selectors are great for automated testing because they allow you to immediately interact with the right element and be sure that it is the only one on the page.

Chrome
Firefox
safari
Opera

3) *

* ( margin: 0; padding: 0; )

CSS selector for all elements. The asterisk symbol selects all elements that are on the page. Many developers use it to remove (zero out) the margins (margin and padding) of all page elements. However, in practice it is better not to do this because this CSS selector loads the browser quite heavily by iterating over all the elements on the page.

The * symbol can also be used to select all child elements:

#header * ( border: 5px solid grey; )

This example selects all children (descendants) of the element with #header . But it's always worth remembering that this selector is quite heavy for the browser.

Chrome
Firefox
safari
Opera

4) X

a ( color: green; ) ol ( margin-left: 15px; )

CSS type selector. How to select all elements of the same type if they have neither id nor class? You should use CSS selector by element type. For example, to select all ordered lists on a page, use ol (...) as shown above.

Chrome
Firefox
safari
Opera

5) X Y

li a ( font-weight: bold; text-decoration: none; )

CSS child selector or CSS child selector used most often. It is used when it is necessary to select elements of a certain type from a set of child elements. For example, you need to highlight all the links that are in the li element. In this case, use this selector. When using chains of such selectors, always ask yourself if you can use an even shorter sequence of selectors to select a given element.

Chrome
Firefox
safari
Opera

6) X + Y

div + p ( font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; )

Adjacent element selector chooses only an element of type Y that comes immediately after the X element. In this case, each paragraph following immediately after each div element will receive a special font type and size.

IE7+
Firefox
Chrome
safari
Chrome

7) X > Y

#content > ul ( border: 1px solid green; )

CSS child selector. The difference between the X Y and X > Y selectors is that the CSS selector in question will only select immediate child elements (select only direct descendants). Eg:

List item
- Descendant of the first element of the list
List item
List item

The #content > ul CSS selector will only select the ul that is a direct child of the div with id="container" . It will not select a ul that is a child of the first li. This is a fairly speedy CSS selector.

Chrome
Firefox
safari
Opera

8) X ~ Y

ol ~ p ( margin-left: 10px; )

Sister (sublingual) elements selector less strict than X + Y. It will select not only the first, but also all other elements of p following ol.

Chrome
Firefox
safari
Opera

a:link ( color: green; ) a:visited ( color: grey; )

Pseudo-class:link is used to select all links that have not yet been clicked. If you need to apply a certain style to already visited links, then this is used pseudo-class:visited.

Chrome
Firefox
safari
Opera

10) X

a (color: red; )

CSS selector by attribute. In this example, only those links that have a title attribute are selected.

Chrome
Firefox
safari
Opera

11) X

a (color: yellow; )

Chrome
Firefox
safari
Opera

12) X

a ( color: #dfc11f; )

The asterisk means that the value you are looking for must be somewhere in the attribute (any part of the href attribute). Thus, links from https://www..stijit. will be selected as well. Gold color will be applied to all selected links.

Chrome
Firefox
safari
Opera

13) X

a ( background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; )

Some sites have small arrow icons next to links to other sites to indicate that they are external links. Karat “^” is a character to indicate the beginning of a line. Thus, to select all tags whose href begins with http, you need to use the CSS selector with karat, as shown in the example above.

Chrome
Firefox
safari
Opera

14) X

a (color: green; )

This uses a regular expression and the $ symbol to mark the end of a line. In this example, we are looking for all links that link to images with a .jpg extension.

Chrome
Firefox
safari
Opera

15) X

a (color: green; )

Here we apply CSS selector by custom attribute. We add our own data-filetype attribute to each link:

link

Now, using the above CSS selector, you can select all links leading to images with any extension.

Chrome
Firefox
safari
Opera

16) X

The tilde (~) allows you to select a specific attribute from a space-separated list of attributes. You can write our own data-info attribute, in which you can specify several keywords separated by a space. This way you can specify that the link is external and leads to an image.

link

Using this technique, we can select elements with the combinations of attributes we need:

/* Select the element whose data-info attribute contains the value external */ a ( color: green; ) /* Select the element whose data-info attribute contains the value image */ a ( border: 2px dashed black; )

Chrome
Firefox
safari
Opera

17) X:checked

input:checked ( border: 3px outset black; )

This pseudo-class only highlights elements such as a checkbox or a radio button, and only when they are already in the checked state.

Chrome
Firefox
safari
Opera

18) X:after

The :before and :after pseudo-classes are very useful - they create content before and after the selected element.

Clearfix:after ( content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Here, using the :after pseudo-class, an empty string is created after the block with the .clearfix class, after which it is cleared. This approach is used when it is not possible to apply the overflow: hidden property.

Chrome
Firefox
safari
Opera

19) X: hover

div:hover ( background-color: rgba(11,77,130,0.5); )

Applies a specific style to an element when the mouse cursor hovers over it. Older versions of Internet Explorer only apply :hover to links.

A:hover ( border-bottom: 1px dotted blue; )

IE6+ (Only applies to links in IE6)
Chrome
Firefox
safari
Opera

20) X:not(selector)

div:not(#content) ( color: grey; )

Pseudo-class not (negations) useful when, for example, all divs need to be selected, except for the one with id="content" .

By the same principle, you can select all elements except p:

*:not(p) ( color: blue; )

Chrome
Firefox
safari
Opera

21) X::pseudoElement

p::first-line ( font-weight: bold; font-size: 24px; )

Pseudo-elements can be used to apply styles to sub-elements, such as the first line of a paragraph or the first letter in a word. Applies to block elements only.

Selecting the first letter of a paragraph:

P::first-letter ( font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Selecting the first line in a paragraph:

P:first-line ( font-size: 28px; font-weight: bold; )

Chrome
Firefox
safari
Opera

22) X:first child

ul li:first-child ( border-top: none; )

Pseudo-class first-child selects only the first child of the parent element. Often used to remove a border from the first element of a list. This pseudo-class has been around since css 1.

Chrome
Firefox
safari
Opera 3.5+
Android

23) X:last child

ul > li:last-child ( border-bottom: none; )

Pseudo-class last-child selects the last child of the parent element. It only appeared from CSS 3.

IE9+ (IE8 supports first-child but not last-child. Microsoft (c))
Chrome
Firefox
safari
Opera 9.6+
Android

24) X:only-child

div p:only-child ( color: green; )

Pseudo-class only-child allows you to select those elements that are the only children of their parents.

Chrome
Firefox
Safari 3.0+
Opera 9.6+
Android

25) X:nth-child(n)

li:nth-child(3) ( color: black; )

Selects the child element by the number specified in the parameter. nth-child selector takes an integer as a parameter, but counts from 1, i.e. if you want to select the second item in the list, use li:nth-child(2) . All pseudo-classes using nth-child only appeared starting with CSS 3.

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

26) X:nth-last-child(n)

li:nth-last-child(2) ( color: red; )

If you have a large list of elements in ul and need to select the third element from the end? Instead of writing li:nth-child(109) , one can use nth-last-child last child selector. This method is the same as the previous one, but the countdown is from the end.

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

27) X:nth-of-type(n)

ul:nth-of-type(3) ( border: 1px dotted black; )

If there are four unordered lists on the page and you only want to style the third one that doesn't have a unique id, you should use nth-of-type.

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

28) X:nth-last-of-type(n)

ul:nth-last-of-type(3) ( border: 2px ridge blue; )

Pseudo-class nth-last-of-type(n) is designed to select the nth element of a particular type from the end.

Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

29) X:only-of-type

li:only-of-type ( font-weight: bold; )

Pseudo-class only-of-type selects elements that have no neighbors within the parent element. For example, you can select all uls that contain only single li.

Chrome
Firefox 3.5+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

30) X:first-of-type

ul:first-of-type > li:nth-child(3) ( font-style: italic; )

Pseudo-class first-of-type selects the first element of the given type.

Chrome
Firefox 3.5+
Safari 3.1+
Opera 9.5+
Android 2.1+
iOS 2.0+

Hello everyone, fellows.
Today, CSS is all around us, and even a Mayan programmer should understand it.
The most used are the good old #id and .class , they are familiar to everyone who has ever worked with CSS.
Of course, the world of Selectors is far from limited to this. I've been working with CSS for quite some time and want to share as many useful selectors as possible. All of them define the style of an object.

CSS Selectors

I explain many selectors applicable to the above example.

.class

(Ex. .main) This selector combines all elements with the class "main". He was born a long time ago and actively participates in the development.

#id

(Ex. #Block_Form) This selector combines elements with id="Block_Form" What is the difference between .class and #id - and the difference can be understood by an example: PASSPORT NUMBER = id, SURNAME = class. It is also important that - Identifier (id) can be called from a script using the GetElementById function, unlike a class.
The class can be used multiple times, but the identifier must be unique.

*

Selects, merges all elements
(Ex. *) ( background-color:yellow; ))

element

(Ex. p) Combines all elements of the p tag.

element,element

(Ex. div,p) Concatenates all div elements and all p elements
.
You can also select similar selectors in this group:

element element

(Ex. div p) Selects all p elements within a div.

element>element

(Ex. div>p) Concatenates all p parented by div.

element+element

(Ex. div+p) Concatenates all the p's immediately after the div.

(Ex. ) Combines all elements with a target attribute

(Ex. ) Merges all elements with the given target="_blank"

(Ex.) Combines all elements that contain "Apple" in their title

(Ex.) Combines all elements with a class attribute starting with "top"

All tags were written without "<>".

Further, I think it is necessary to show exactly these selectors, since they are very important and are extremely often used in solving many problems - from Simple animations with hovering, designing links, pictures, and other things to a more global goal of reducing the code as a whole.

They are also called Pseudoclasses:

:link

(Ex. a:link) Combines all links that have not yet been visited (Ex. a:visited) Combines all links that the user has already visited

:active

(Ex. a:active) The :active pseudo-class defines the style for an active link. The link becomes active when you click on it.

:hover

(Ex. a:hover) Link may change style when hovering

:focus

(Ex. input:focus) Changes the style when focusing. often used in practice to highlight form fields when focusing on it

:first letter

(Ex. p:first-letter) Specifies the style for the first character in the element's text

:first line

(Ex. p:first-line) Specifies the style of the first line. I use it to change the color of the text, the background color and the font, but as the folk Habrumels show, its functions are not limited to this

:first child

(Ex. p:first-child) Just to explain - applies styling to the first child element of its parent. In the example if p is the first element of its parent
Next come two very interesting classes:

:before

(Ex. p:before)

:after

(Ex. p:after)
They are used in cases where - you need to display the desired content before or after the content of the element to which it is added. Works in conjunction with the content: property. I also use them as additional elements instead of div, in which case you need to write content:"";. You also need to remember that when adding:before to a block element, the value of the display property can only be: block, inline, none, list-item. All other values will be treated as block. When adding :before to an inline element, display is limited to inline and none . All others will be treated as inline.
:before inherits style from the element to which it is added.

:lang(language)

(Ex. p:lang(it)) A rather simple but sometimes necessary element - for example: Styles each p with a lang attribute whose value starts with "it"

CSS3 selectors

These selectors are of great interest, since they are rarely used by anyone and, of course, I want to figure out how to use them, so I will give examples. Also in this group of selectors in the long-suffering IE8 and earlier DOCTYPE must be declared.

element1~element2

(Ex. p~ul)
p~ul ( background:red; ) Sets the background color of all ul elements that precede p with the same parent. Roughly speaking - in this example, the background will be red only for those "lists" that are after the parent of the p tag.

A div element.

item
item
item

- in this case, nothing will happen, and in

item
item
item

and in this case the fields of Items will have a back-color - red.

(Ex. a) By example, defines the style of each a for which the value of the src element starts with "https". Here's another example:

item1

item2

item3

Item4

Simply put - this selector makes it possible to set the background color on all div elements that have a class attribute value that starts with "test" - namely item3, item4.

(Ex. a) Selects every a tag for which the SRC attribute value ends with ".PDF. Here's another good example:

Item1

Item2

Item3

Item4

In this example, the use of this selector will be very clearly visible, namely, Item1 (because the class ends with _test) and item3 will be repainted in Red.

(Ex. a) Selects every a tag for which the SRC attribute value contains the substring "w3schools".

item1

item2

item3

Item4

In this example, the result will be filled lines item1, item3, item4.

:first-of-type

(Ex. p:first-of-type) Specifies the style rules for the first element in its parent's list of children.

:last-of-type

(Ex. p:last-of-type) Appropriately sets the style rules for the last element in the list of child elements of its parent.

:only-of-type

(Ex. p:only-of-type) But this one applies to a child element of the specified type, only if it is the only one of the parent. Same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1).

:only child

(Ex. p:only-child) Such an element is applied by example to the child element p, only if it is the only one of the parent

The next two can also be used well for a specific sequence - odd (odd), even (even) or number (1,2,3 ... or expressions 2n + 1) given in (X):

:nth-child(n)

(Ex. p:nth-child(2)) For each

Which is the second child of the parent.

:nth-last-child(n)

(Ex. p:nth-last-child(2)) The same meaning as the previous one, except that the countdown is not from the first element, but from the last.

:nth-of-type(n)

(Ex. p:nth-of-type(2)) Used to add style to elements of the specified type based on numbering. For example, for images near the title, apply with the Float value: -left or –right.

:nth-last-of-type(n)

(Ex. p:nth-last-of-type(2)) The same as the previous one, but counting is not from the first element, but from the last one.

:last child

(Ex. p:last-child) This selector specifies the styling of the last element of its parent.

Also worth highlighting:

:root

(Ex. :root) Such a selector specifies the root element of the document, in other words - .

:empty

(Ex. p:empty) Specifies empty elements - without any child elements, text or spaces.

:target

(Ex.#news:target) Roughly speaking, this is a definition based on the target element. In the example, the definition of the current id is #news element. Used for URL.

:enabled

(Ex. input:enabled) Applied to forms, as access to accessible (not blocked - disabled) form elements, pardon the tautology.

:disabled

(Ex. input:disabled) In other words, it applies to the style of disabled form elements.

:checked

(Ex. input:checked) This pseudo-class applies to interface elements such as radio buttons (checkbox) and flags (radio) when they are enabled, of course.

:not(selector)

(Ex: :not(p)) In the example, the style is applied to all elements that are not p. The selector can be pseudo-classes, tags, identifiers, classes, and attribute selectors.

CSS, like any other language, has its own syntax. There are no elements, parameters, or tags in CSS. CSS has rules. A rule consists of a selector and a style block enclosed in curly braces:

A style declaration block consists of properties and a property value, separated by semicolons:

Practice is our best friend, let's try! Open the html page and css file that we created in lesson #2.

Now let's give the page a blue background. As we remember, the tag is responsible for the background color. , go to file style.css and add the following code:

body(
background: blue
}

Now we check our html page in the browser, the background should turn blue. Next, change the text color to white:

body(
background: blue
color:white;
}

We check, press Ctrl + F5 to refresh the html page in the browser and see that all the text has become white. Now we need to change the heading colors to red for h1 and yellow for h2:

body(
background: blue
color:white;
}
h1(
color:red;
}
h2(
color:yellow;
}

Press again Ctrl+F5 and look at the changes.

In my opinion, the principle is already clear: first we specify the element (selector) to which we apply the style, and then we write its properties and their values in curly braces. We will devote separate lessons to properties and values, but at the moment we are considering the general principle of compiling a style sheet.

CSS selectors

Selectors by ID (identifier)

The previous examples used page elements as selectors: body, h1, h2. Imagine this situation - there are several paragraphs in an html page, we need the text of one of the paragraphs to be pink, and the rest of the paragraphs to be black. To implement this idea, we need to specify a unique identifier ( id) paragraph and create a separate style for it.

Paragraph text with identifier (id).

You can assign any unique names, with the exception of reserved words (these are the names of tags and parameters of HTML and CSS elements). Let's say you cannot assign a name to an identifier body. Now let's add several paragraphs to the html page and one of them will be with an identifier:

css id

This is a first level heading.

This is just text

This is a second level heading.

This is just text

Simple paragraph

Paragraph with identifier (id)

Both paragraphs are now white on the page. Let's add to style.css styles for our paragraphs:

body(
background: blue
color:white;
}
h1(
color:red;
}
h2(
color:yellow;
}
p(
color:black;
}
#pink(
color:pink;
}

First we specified that the text of all paragraphs would be black, but the paragraph text with id "pink" will be pink. Our selector consists of a lattice ( # ) and identifier name ( pink).

It is important to remember that you cannot create two paragraphs with the same id, paragraph c id "pink" can be only one. Each paragraph can have its own unique identifier, let's say we create a paragraph with id="green" and give it your own style in the style sheet.

Selectors by class

Previously, we created a paragraph with a pink color using id, but if we want to change the color of several paragraphs to pink. For this there is a parameter class.

Let's add a couple of paragraphs to the html page and assign them class="pink":

CSS class

This is a first level heading.

This is just text

This is a second level heading.

This is just text

Simple paragraph

Paragraph with ID

Paragraph with class (class) pink

Paragraph with class (class) pink

To assign a style to a class, we write a rule in the style sheet where the name pink will again be used as the selector, but in this case it is the name of the class, so a dot (.) will be used before the name:

body(
background: blue
color:white;
}
h1(
color:red;
}
h2(
color:yellow;
}
p(
color:black;
}
#pink(
color:pink;
}
.pink(
color:pink;
}

There can be infinite paragraphs with such a class.

Let's put all the new knowledge together:

All identical elements (headings, paragraphs, etc.) must have the same style, then the selector consists of only this element p(color:black;)
The element (paragraph, heading, etc.) must be different from all the others, then we assign an identifier (id) to it and put a pound sign in front of the identifier in the style sheet # , #pink(color:pink;)
On the page, several elements must have the same style, then they are assigned a class ( class) and prefix the class with a dot (.) in the style sheet, .pink(color:pink;)
At id higher priority than class.

Context selector

Suppose we have an html page with the following code:

Selectors by element

This text is in the paragraph

It's just text.
This text is in italics

This text is in a paragraph, but this part is in italics

In the browser we will see:

Imagine that we didn't want to highlight all italic text in green, but only the one that is in paragraphs. Let's make changes to the style sheet:

pi(
color:green;
}

So we wrote that this style should be applied to the i elements that are in the paragraph. Element names must be separated by a space. Such selectors are called context selectors. Let's take a look at our page in a browser:

Grouping Selectors

Imagine a situation where style declaration blocks for different selectors are the same (headings H1 H2 H3 green), they can be grouped. Selectors for grouping must be listed separated by commas. Example:

h1, h2, h3(
color:green;
}

In addition to the color, we want to set the size. Then we need to add to our style sheet:

h1, h2, h3(
color:green;
}
h1(
font-size:18px;
}
h2(
font-size:16px;
}
h3(
font-size:14px;
}

Headings (H1 H2 H3) will have their own size, but they will all be green.

There is a lot of controversy about groupings:

Some consider the above code to be correct, because. avoided repeating the same element properties and shortened the code.

Others believe that grouping worsens the logic of the code. Having found the selector for the h3 heading, it is not immediately clear why the text in it is green. Supporters of this opinion group only those elements in which the blocks completely coincide.

Group or not, it's up to you. But you need to remember about different methods, this will make your life much easier when you read someone else's code in templates.

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // displaying my thumbnail size?>

Let's talk about CSS selectors. In addition to the usual access to elements through the class name, id and html tag name, you can use special combinations and commands. Let's consider them in the article in more detail. Some selectors are supported by all browsers, some only by the latest versions of browsers.

1. * - select all elements

* ( margin: 0; padding: 0; )

Let's start with simple selectors and then move on to more complex ones. Many developers use it to reset all elements' margins and paddings. At first glance, this is convenient, but it’s still better not to do this in production code. This CSS selector loads the browser too much.

It can also be used to select all child elements of a specific container.

#container * ( border: 1px solid black; )

In this case, all child elements of the #container block are selected. Try not to abuse it.

Compatibility

IE6+
Firefox
Chrome
safari
Opera

2. #X

#container ( width: 960px; margin: auto; )

The pound sign in front of the CSS selector will select the element with id="container" . It's very simple, but be careful when using id.

Ask yourself: Do I absolutely need to select by id?

id style is hard-wired to the element and is not reusable. It is more preferable to use class="" classes, tag names or even pseudo-classes.

Compatibility

IE6+
Firefox
Chrome
safari
Opera

3.X

.error ( color: red; )

This is the class X CSS selector. The difference between id and class is that the same class can have multiple elements on the page. Use classes when you want to style multiple elements of the same type. When using id, you will have to write a style for each individual element.

Compatibility

IE6+
Firefox
Chrome
safari
Chrome

4. XY

li a ( text-decoration: none; )

The CSS child selector is the most common. If you need to select elements of a certain type from many child elements, use this selector. For example, you want to select all links that are in the li element. In this case, use this selector.

Don't make CSS view selectors X Y Z A B.error . Always ask yourself if it is necessary to write such a cumbersome CSS selector to select a given element.

Compatibility

IE6+
Firefox
Chrome
safari
Chrome

5. X

a ( color: red; ) ul ( margin-left: 0; )

What if you want to span all elements of a given type on a page? Keep it simple, use the CSS type selector. If you must highlight all unordered lists use ul()

Compatibility

IE6+
Firefox
Chrome
safari
Opera

a:link ( color: red; ) a:visted ( color: purple; )

We're using the :link pseudo-class to highlight all links that haven't been clicked yet.

If we need to apply a certain style to already visited links, then we use the :visited pseudo-class.

Compatibility

IE7+
Firefox
Chrome
safari
Opera

7. X+Y

ul + p ( color: red; )

Selects the next element. He will choose only the element of type Y that comes immediately after the element X. In the example, the text of the first paragraph after each ul will be red.

Compatibility

IE7+
Firefox
Chrome
safari
Chrome

8. X>Y

div#container > ul ( border: 1pxsolidblack; )

The difference between the default X Y and X > Y is that the CSS selector in question will only select immediate child elements. For example, consider the following code.

List item
- child element
List item
List item
List item