Questions tagged [css-selectors]

Selectors are patterns that match against elements in a document tree. In a CSS rule, they are used to define styles for elements that match the pattern.

Selectors are patterns that match against elements in a document tree. In a CSS rule, they are used to define styles for elements that match the pattern.

Simple selectors:

/* Type selector */  
eltname {}

/* Class selector */
.classname {}

/* ID selector */
#idname {}

/* Universal selector */
* {}

/* Attribute selector */
[attr] {}
[attr=value] {}
[attr~=value] {}
[attr|=value] {}
[attr^=value] {}
[attr$=value] {}
[attr*=value] {}

Combinators

/* Adjacent sibling combinator */
A + B {} 

/* General sibling combinator */
A ~ B {}

/* Child combinator */
A > B {}

/* Descendant combinator */
A B {}

/* Column combinator */
A || B {}

Pseudo-classes

/* Pseudo-classes */
a:visited {}
a:hover {}
a:active {}
a:focus {}

Pseudo-elements

/* Pseudo-elements */
p::first-line {}
p::before {}
p::after {}

Useful resources on CSS selectors:

Future Implementations:

15251 questions
4080
votes
33 answers

Is there a CSS parent selector?

How do I select the
  • element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing this with JavaScript, but I'm hoping that…
  • jcuenod
    • 55,835
    • 14
    • 65
    • 102
    1795
    votes
    33 answers

    Is there a "previous sibling" selector?

    The plus sign selector (+) is for selecting the next adjacent sibling. Is there an equivalent for the previous sibling?
    Jourkey
    • 33,710
    • 23
    • 62
    • 78
    1330
    votes
    11 answers

    Which characters are valid in CSS class names/selectors?

    What characters/symbols are allowed within the CSS class selectors? I know that the following characters are invalid, but what characters are valid? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
    Darryl Hein
    • 142,451
    • 95
    • 218
    • 261
    1297
    votes
    24 answers

    CSS selector for first element with class

    I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: .home .red:first-child { border: 1px solid red; }
    blah
    Rajat
    • 32,970
    • 17
    • 67
    • 87
    1095
    votes
    3 answers

    What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

    Searching for the ~ character isn't easy. I was looking over some CSS and found this .check:checked ~ .content { } What does it mean?
    Tarang
    • 75,157
    • 39
    • 215
    • 276
    1072
    votes
    13 answers

    not:first-child selector

    I have a div tag containing several ul tags. I'm able to set CSS properties for the first ul tag only: div ul:first-child { background-color: #900; } However, my following attempts to set CSS properties for each other ul tag except the first…
    Oto Shavadze
    • 40,603
    • 55
    • 152
    • 236
    902
    votes
    10 answers

    Can I write a CSS selector selecting elements NOT having a certain class or attribute?

    I would like to write a CSS selector rule that selects all elements that don't have a certain class. For example, given the following HTML:

    Example

    David Nordvall
    • 12,404
    • 6
    • 32
    • 52
    842
    votes
    5 answers

    Can the :not() pseudo-class have multiple arguments?

    I'm trying to select input elements of all types except radio and checkbox. Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it. form input:not([type="radio"], [type="checkbox"]) { …
    delphi
    • 10,705
    • 5
    • 22
    • 18
    830
    votes
    21 answers

    Is there a CSS selector for elements containing certain text?

    I am looking for a CSS selector for the following table: Peter | male | 34 Susanne | female | 12 Is there any selector to match all TDs containing "male"?
    jantimon
    • 36,840
    • 23
    • 122
    • 185
    816
    votes
    4 answers

    wildcard * in CSS for classes

    I have these divs that I'm styling with .tocolor, but I also need the unique identifier 1,2,3,4 etc. so I'm adding that it as another class tocolor-1.
    tocolor 1
    tocolor 2 …
    twitter
    • 8,895
    • 6
    • 22
    • 20
    814
    votes
    9 answers

    What does the "+" (plus sign) CSS selector mean?

    For example: p + p { /* Some declarations */ } I don't know what the + means. What's the difference between this and just defining a style for p without + p?
    gday
    • 8,281
    • 4
    • 19
    • 7
    619
    votes
    3 answers

    CSS Selector that applies to elements with two classes

    Is there a way to select an element with CSS based on the value of the class attribute being set to two specific classes. For example, let's say I have 3 divs:
    Hello Foo
    Hello World
    Adam
    • 12,236
    • 9
    • 39
    • 44
    610
    votes
    7 answers

    CSS '>' selector; what is it?

    I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do?
    Bojangles
    • 99,427
    • 50
    • 170
    • 208
    594
    votes
    3 answers

    Why do browsers match CSS selectors from right to left?

    CSS Selectors are matched by browser engines from right to left. So they first find the children and then check their parents to see if they match the rest of the parts of the rule. Why is this? Is it just because the spec says? Does it affect the…
    tgandrews
    • 12,349
    • 15
    • 43
    • 55
    559
    votes
    6 answers

    Select elements by attribute in CSS

    Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role)?
    Diogo Cardoso
    • 21,637
    • 26
    • 100
    • 138
    1
    2 3
    99 100