{"_id":"55e7560373169617001f2e94","category":{"_id":"55e89569cdbb8a350096df9c","__v":14,"project":"5429beef1163360800ed31fa","pages":["55e896ac4535442d00ccacf3","55e8b205f0f1850d00d24a59","55e8b243720fde1700659a0e","55e8b4258c0c601700f978e0","55e8b5537cdf7119002d2e3a","55e8b5737cdf7119002d2e3c","55e8b5863fef5017000dbd9f","55e8b59ef0f1850d00d24a63","563b50349e3f2225009fd296","5640d891d4b2e00d00bb3d48","564cfd4e2248461700bd4021","5660e89689e82f0d008f6832","5668d3428ff3da0d0079092f","56abb944f25f160d00e17f40"],"version":"5429beef1163360800ed31fd","sync":{"url":"","isSync":false},"reference":true,"createdAt":"2015-09-03T18:46:01.692Z","from_sync":false,"order":1,"slug":"sdk-integrations","title":"Integrating for Web"},"parentDoc":null,"version":{"_id":"5429beef1163360800ed31fd","__v":21,"project":"5429beef1163360800ed31fa","createdAt":"2014-09-29T20:19:59.904Z","releaseDate":"2014-09-29T20:19:59.904Z","categories":["5429beef1163360800ed31fe","55e74e1f5d36b32b002563fa","55e7500a73169617001f2e86","55e76b8196131b2f00bf4b72","55e89569cdbb8a350096df9c","55f8935eb089b71700a8364e","55f8a67d3bb4bb0d0022d093","55f9dbefc7ef770d00d9bf6d","5601c21a22ecf60d002b27b3","5601c21ff12aee0d001bb06e","5601c2256c7b610d00280db5","5601c22c22ecf60d002b27b4","5603738d0c78b00d0039af47","5626f70bfcbbc621004ebf52","566f7a1ae144ab0d00e9732f","566f85ca7820960d00c3b93d","56708ce43a32d20d00c45cbf","56708d436995210d003aad8e","5736471abe10a9200030732c","57a82c7aff9bd30e00a6f1c1","591b8500e3992319007190f4"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"user":"55e74aae73169617001f2e78","__v":9,"project":"5429beef1163360800ed31fa","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-02T20:03:15.154Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":true,"order":7,"body":"AdsNative follows its own format by specifying the CSS Path to simplify and optimize native ad injections.\n\nCheck out this example:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#div-id > div.class:eq(0) > div.class2:eq(2)\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n\n\n\nHere are some basic rules to follow:\n1. Start by listing the outermost elements from left to right.\n2. AdsNative will insert the placement just before the element for which you configure the CSS Path - unless you have :after after the last element, in which case it will insert it after the element. For example, \n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#div-id > div.class:eq(0) > div.class2:eq(2):after will output the placement after the given element.\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n3. Each div element relation is separated with ` > . (Leaving a blank space before and after is part of the syntax, and the cssPath follows a strict syntax.) > ` means ‘child of’.\n4. If you are specifying an element with its ID, specify it as #element-id-string. In this case, do not specify the element name.\n5. If you are specifying an element by class name, specify the element name followed by ., class name, and the index of the element, as there can be multiple elements within a given class name. Example div.class:eq(0)\n6. If you want to specify just an element name, you can specify it as element-name:eq(0)\n\nA few examples of valid CSS Paths:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#content > ul.main:eq(0) > li:eq(0)\\n#content > ul.main:eq(0) > li:eq(10)\\n#content\\n#content:after\\nul.main-content:eq(0) > li:eq(10)\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\nA few examples of invalid CSS Paths:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" #content>ul.main:eq(0) > li:eq(0) (no spaces)\\n #content:eq(0) > li.post:eq(0) (:eq(0) for element name with ID)\\n div#content > li:eq(10) (div element name in css path)\\n #content > ul.main > li:eq(10) (no index specified for ul)\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n\nTry to specify the shortest css path whenever possible. Which basically means - try to use the nearest element with an ID, and then work downwards. Element name search takes the longest, then element with class name, and element with div id is the fastest.","excerpt":"","slug":"css-path-guide","type":"basic","title":"CSS Path Guide"}
AdsNative follows its own format by specifying the CSS Path to simplify and optimize native ad injections. Check out this example: [block:code] { "codes": [ { "code": "#div-id > div.class:eq(0) > div.class2:eq(2)\n", "language": "text" } ] } [/block] Here are some basic rules to follow: 1. Start by listing the outermost elements from left to right. 2. AdsNative will insert the placement just before the element for which you configure the CSS Path - unless you have :after after the last element, in which case it will insert it after the element. For example, [block:code] { "codes": [ { "code": "#div-id > div.class:eq(0) > div.class2:eq(2):after will output the placement after the given element.", "language": "text" } ] } [/block] 3. Each div element relation is separated with ` > . (Leaving a blank space before and after is part of the syntax, and the cssPath follows a strict syntax.) > ` means ‘child of’. 4. If you are specifying an element with its ID, specify it as #element-id-string. In this case, do not specify the element name. 5. If you are specifying an element by class name, specify the element name followed by ., class name, and the index of the element, as there can be multiple elements within a given class name. Example div.class:eq(0) 6. If you want to specify just an element name, you can specify it as element-name:eq(0) A few examples of valid CSS Paths: [block:code] { "codes": [ { "code": "#content > ul.main:eq(0) > li:eq(0)\n#content > ul.main:eq(0) > li:eq(10)\n#content\n#content:after\nul.main-content:eq(0) > li:eq(10)", "language": "text" } ] } [/block] A few examples of invalid CSS Paths: [block:code] { "codes": [ { "code": " #content>ul.main:eq(0) > li:eq(0) (no spaces)\n #content:eq(0) > li.post:eq(0) (:eq(0) for element name with ID)\n div#content > li:eq(10) (div element name in css path)\n #content > ul.main > li:eq(10) (no index specified for ul)", "language": "text" } ] } [/block] Try to specify the shortest css path whenever possible. Which basically means - try to use the nearest element with an ID, and then work downwards. Element name search takes the longest, then element with class name, and element with div id is the fastest.