Mastering CSS Syntax & Selectors with example

Hi, developer! Welcome to this guide. CSS syntax and selectors are important in creating a website. CSS syntax is the structure and rules used to write code to style web pages. And with the help of selectors, we can style any layout. In this article, we covered everything you need to know with examples.

So let's get started.

CSS Syntax

p {
    color: red;
    border: 2px solid blue;
}

"P" targets specific HTML elements for styling, such as paragraphs (<p>).

The "color" property sets the text color, with the value "red."

The "border" property adds a border around the element. In this case, the border is 2 pixels solid and colored blue.

CSS selectors

CSS selectors enable you to style specific elements in an HTML page by selecting and applying CSS. For instance, if you've written a line within a <p> tag, you can target and style all <p> tags.

Selectors come in various types:

Id (#): Targets elements by their unique identifier.

Class (.): Selects elements with a specific class name.

Universal (*): Applies styles to all elements on the page.

Elements (p, h1, etc.): Target specific HTML elements for styling.

The id selector (#)

When you apply an ID to a tag, it should be unique, meaning it can only be used once in the HTML document. Another ID should not have the same name. In CSS, you use (#) to select the ID, followed by the ID's name in the HTML file. Then, you can style it as needed.

<head>
    <style>
        #container {
            text-align: center;
            width: 40%;
            background-color: thistle;
            border: 3px solid black;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <h1>The id Selector</h1>
    <div id="container">
        <p>Code Mafias</p>
    </div>
</body>

The class selector (.)

When using a class, you can assign multiple class names to different elements. To select a class in CSS, use dot (.) followed by the class name. Then, you can apply styles to all elements in that class.

<head>
    <style>
        /* <-- Both are the same --> */
        .first-class {
            width: 20%;
            background-color: thistle;
        }

        .sec-class {
            height: 30vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="first-class sec-class">Class Selector</div>
</body>

CSS Class selector

When styling two divs with the same class names, don't use a space between them. However, if one div is nested inside another, leave a space when writing the CSS selector.

<head>
    <style>
        .box .third-class {
            width: 20%;
            background-color: steelblue;
            height: 30vh;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .class.third-class {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20%;
            height: 10vh;
            background-color: thistle;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="first-class sec-class third-class"> Class Selector </div>
    </div>

    <div class="class third-class">
        This is the same class selector
    </div>
</body>

**The universal selector (*)**

In the Universal selector, you can style all of the elements, classes, and IDs at the same time.

<head>
    <style>
        h1 {
            text-align: center;
        }

        div * {
            background-color: steelblue;
            color: thistle;
            font-family: sans-serif;
            text-align: center;
        }
    </style>
</head>


<body>
    <h1>The universal selector</h1>
    <div class="navbar">
        <p>Navbar</p>
        <div class="border">The border</div>
        <h1>The right side</h1>
    </div>
</body>

The element selector

With element selectors in CSS, you can style HTML elements based on their names. This allows you to apply styles to multiple elements of the same type just by using the element name. You can also target both elements and classes at once for styling.

<head>
    <style>
        body {
            width: 40%;
        }

        h1 {
            text-align: center;
        }

        h2,
        p,
        .element {
            background-color: thistle;
            height: 5vh;
            text-align: center;
        }

        div p {
            background-color: steelblue;
            height: 4vh;
            color: white;
        }

        p.first {
            background-color: steelblue;
            height: 4vh;
            color: white;
        }
    </style>
</head>

<body>
    <h1>The element selector</h1>
    <h2>The group element selector</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    <div class="element"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div> <p>Lorem ipsum dolor sit amet.</p> </div>
    <p class="first">Lorem ipsum dolor sit amet.</p>
</body>

The child selector (>)

The child selector is a CSS selector used to target elements that are direct children of a specific parent element. It selects elements based on their immediate parent-child relationship.

For example, if you have a <div> element containing a <p> element, you can use the child selector to target only the <p> elements that are direct children of the <div>.

<head>
    <style>
        body {
            width: 30%;
        }

        div>p {
            background-color: thistle;
        }

        div>span>p {
            background-color: steelblue;
            color: white;
        }
    </style>
</head>

<body>
    <h1>The Child selectorr</h1>
    <div>
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>

    <p>Lorem ipsum dolor sit amet.</p>

    <div>
        <span> <p>Lorem ipsum dolor sit amet.</p> </span>
    </div>
</body>

The adjacent sibling selector (+)

The adjacent sibling selector is indicated by the plus sign (+) in CSS. It targets elements that are immediately preceded by a specified element. For example, if you have a <div> element followed by a <p> element, you can use the adjacent sibling selector (div + p) to target and style the <p> element that directly follows the <div>.

<head>
    <style>
        body {
            width: 30%;
        }

        div+p {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <div>
        <h2>The adjacent sibling selector</h2>
        <p>p tag in div </p>
        <p>First p tag</p>
    </div>

    <p>p tag after div</p>
    <p> p tag</p>
    <div>
        <span>
            <p>p tag</p>
        </span>
    </div>
</body>

The attribute selector [ ]

The attribute selector in CSS allows you to target and style elements based on their attributes. For example, you can select elements with a specific attribute, such as href or target, and apply styles to them. This selector is denoted by square brackets [ ].

<head>
    <style>
        body {
            width: 35%;
            font-family: sans-serif;
        }

        a[target] {
            background-color: teal;
            color: white;
            font-size: 22px;
        }

        p[target] {
            background-color: thistle;
            color: black;
            font-size: 22px;
        }
    </style>
</head>

<body>
    <h1>The attribute selector</h1>
    <p target="_blank">This is the attribute</p>
    <a href="https://www.codemafias.com" target="_blank">codemafias.com</a><br>
    <a href="https://www.infosys.com">infosys.com</a><br>
    <a href="https://www.suzuki.com" target="_blank">suzuki.com</a>
</body>

The hover, active, and focus selector (:)

The :active, :hover, and :focus selectors are CSS pseudo-classes used to style elements based on their interaction states:

:active: This selector targets elements that are currently being activated, such as links when users are clicked. It allows you to style elements in their active state.

:hover: This selector targets elements when users are hovered over with the mouse cursor. It allows you to apply styles when the user hovers over an element.

:focus: This selector targets elements that currently have keyboard focus or are focused by other means, such as using the Tab key to navigate through interactive elements. It allows you to style elements that are in focus, typically used for form inputs and interactive elements.

<head>
    <style>
        body {
            width: 30%;
        }

        a:active {
            background-color: red;
            color: blue;
        }

        h3:hover {
            background-color: red;
            cursor: pointer;
            color: white;
        }

        input:focus {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <h1>The active Selector[:]</h1>
    <a href="https://codemafias.com">codemafias.com</a><br>
    <a href="https://codemafias.com/about">About</a><br>
    <a href="https://codemafias.com/category/All%20Posts">All post</a>
    <p>The link will be activated as soon as you click on this link.</p>
    <h1>The hover Selector[:]</h1>
    <h3>Codemafias</h3>
    <p>On mouse-over on this code mafia, the code mafia will hover.</p>
    <h1>The focus Selector[:]</h1>
    <form>
        F-Name: <input type="text" name="F-Name"><br>
        Age: <input type="number" name="Age">
    </form>
    <p>As soon as you click on this form, it will get focused.
        This background will be according to the color given in your
        background.</p>
</body>

The default selector

The :default selector is primarily used for styling default buttons, but it can also be applied to inputs of type "checkbox" and "radio". This selector targets the default option within a group of options, allowing you to style it differently from other options.

<body>
    <h1>The default Selector</h1>
    <form action="">
        <input type="radio" name="gender" value="male" checked> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
    </form>
</body>

The disabled and enabled selector (:)

The :disabled selector is commonly used in forms to style elements that are disabled, indicating that they cannot be interacted with.

The :enabled selector is utilized in form styling to target elements that are enabled and can be interacted with.

<head>
    <style>
        input:disabled {
            background: thistle;
        }

        input:enabled {
            background: steelblue;
            color: white;
        }
    </style>
</head>

<body>
    <h1>The enabled selector</h1>
    <form action="">
        Name: <input type="text" value="Codemafias"><br>
        FName: <input type="text" value=""><br>
        <br>
        <h1>The disabled selector</h1>
        Country: <input type="text" value="india" disabled><br>
        state: <input type="email" value="Gujarat" name="state" disabled>
    </form>
</body>

The first-child and last-child selector (:)

The :first-child selector is employed to select the first child of any parent element. If the element is the first child, it gets styled according to the specified rules.

The :last-child selector targets the last child of any parent element. If that child is indeed the last one, it applies styles to it.

<head>
    <style>
        .parent :first-child {
            background-color: thistle;
        }

        #parent :last-child {
            background-color: steelblue;
            color: white;
        }
    </style>
</head>

<body>
    <h1>The first-child</h1>
    <div class="parent">
        <p>The first-child of div</p>
        <p>The second-child of div</p>
        <p>The last-child of div</p>
    </div>
    <h1>The last-child</h1>
    <div id="parent">
        <p>The first-child of div</p>
        <p>The second-child of div</p>
        <p>The last-child of div</p>
    </div>
</body>

The first-letter and first-line selector (::)

The ::first-letter selector is utilized to style the first letter of each paragraph.

The ::first-line selector is employed to style the first line of each paragraph.

<head>
    <style>
        body {
            width: 50%;
        }

        .f-letter::first-letter {
            font-size: 3.5em;
            font-weight: 750;
            background: thistle;
            padding: 10px;
            border: 5px solid;
            margin: 5px;
            float: left;
        }

        .f-line::first-line {
            color: steelblue;
            font-weight: bolder;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <h1>The First-letter</h1>
    <div class="f-letter">
        <p>Lorem ipsum...placeat.</p>
    </div><br> <br>

    <h1>The First-line</h1>
    <div class="f-line">
        <p>Lorem ipsum...placeat.</p>
    </div>
</body>

The lang selector ()

The lang() selector works like a class, selecting elements with a particular language attribute value.

<head>
    <style>
        p:lang(first) {
            background: thistle;
        }
    </style>
</head>

<body>
    <h1>The lang selector</h1>
    <p lang="first">Hello world!</p>
</body>

The marker selector (::)

The ::marker selector is used to style the marker of a list item.

<head>
    <style>
        ::Marker {
            color: steelblue;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>The Marker selector</h1>
    <ol>
        <li>Home</li>
        <li>About</li>
        <li>Portfolio</li>
    </ol>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Portfolio</li>
    </ul>
</body>

The nth-child selector ()

The :nth-child() selector targets elements that are the nth child of their parent. When using odd, it styles elements like 1, 3, 5, 7, etc., while even styles elements like 2, 4, 6, 8, etc. The counting starts with the first child.

<head>
    <style>
        div:nth-child(2) {
            color: steelblue;
        }

        p:nth-child(4) {
            color: grey;
        }

        li:nth-child(odd) {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <h1> The nth-child Selector</h1>
    <div>
        <p>Lorem ipsum dolor sit amet1.</p>
    </div>
    <p>Lorem ipsum dolor sit amet2.</p>
    <p>Lorem ipsum dolor sit amet3.</p>
    <p>Lorem ipsum dolor sit amet4.</p>
    <ol>
        <li>First child</li>
        <li>second child</li>
        <li>third child</li>
        <li>four child</li>
        <li>five child</li>
        <li>six child</li>
    </ol>
</body>

The nth-last-child selector ()

The :nth-last-child() selector targets elements that are the nth last child of their parent. When using even, it styles elements like 1, 3, 5, 7, etc., while odd styles elements like 2, 4, 6, 8, etc. The counting starts with the last child.

<head>
    <style>
        p:nth-last-child(2) {
            color: steelblue;
        }

        li:nth-last-child(even) {
            background-color: thistle;
        }
    </style>
</head>

<body>
    <h1>The nth-last-child Selector</h1>
    <div>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <ol>
        <li>First child</li>
        <li>second child</li>
        <li>third child</li>
        <li>four child</li>
        <li>five child</li>
        <li>six child</li>
    </ol>
</body>

The visited selector (:)

The :visited selector is used to style visited links. This helps distinguish which links have been clicked by users. You can apply various properties, like color, background color, border color, outline color, and column rule color, to the visited links in your project.

<head>
    <style>
        a:visited {
            color: steelblue;
        }
    </style>
</head>

<body>
    <h1>The visited selector</h1>
    <a href="https://codemafias.com">codemafias Home</a><br>
    <a href="https://codemafias.com/about">codemafias About</a><br>
    <a href="https://codemafias.com/category/All%20Posts">codemafias Posts.</a>
</body>

The target selector (:)

The :target selector is used to target elements identified by an ID attribute. This allows you to style elements that are the target of a fragment identifier in the URL.

<head>
    <style>
        p:target {
            border: 2px solid white;
            background-color: steelblue;
            color: thistle;
        }
    </style>
</head>

<body>
    <h1>The Target selector</h1>
    <p><a href="#one">Go to Item 1</a></p>
    <p><a href="#two">Go to Item 2</a></p>
    <p><a href="#three">Go to Item 3</a></p> <br>

    <p id="one">Item 1</p>
    <p id="two">Item 2</p>
    <p id="three">Item 3</p>
</body>

The selection selector (::)

The ::selection selector allows you to customize the appearance of selected text on a webpage. When you highlight text by clicking and dragging, the chosen style will be applied to the selected portion.

<head>
    <style>
        ::selection {
            color: thistle;
            background: steelblue;
        }
    </style>
</head>

<body>
    <h1>The Selection selector</h1>
    <p>Lorem ipsum...magnam.</p>
    <h3>Lorem ipsum dolor sit amet.</h3>
</body>

The placeholder selector (::)

The ::placeholder selector in CSS helps you style the placeholder text inside form input fields. With the help of this selector, you can easily customize the placeholder text.

<head>
    <style>
        input::placeholder {
            background-color: steelblue;
            color: thistle;
            margin: 20px;
            font-family: cursive;
        }
    </style>
</head>

<body>
    <h1>The Placeholder selector</h1>
    <input type="text" name="fname" placeholder="Fname">
    <input type="text" name="fname" placeholder="Lname">
</body>

Conclusion

Understanding CSS Syntax & Selectors is key to controlling the style of elements on a webpage. With different selectors like element, class, ID, child, sibling, attribute, and pseudo-selectors, developers can precisely target elements and style them effectively.

I hope you completely understand this topic. If you have any questions, you can ask them in the question box given below our support team will help you ASAP!

Next: Mastering CSS border Property with example...